ajax request images are flashing

Question

I have a basic ajax request and have it set to 3 seconds for right now. will go higher, but I want to fix the problem that happens everytime the request happens. for some reason every image (stored in the DB - not that many and are thumbnails) they all flash.

Is there a way around the images flashing on the get request?

$(document).ready(function(){
   var ajaxDelay = 3000;
   setInterval(function(){
    $('#timedContainer').load('jquery_timed.php');   
    }, ajaxDelay);
});

From what I understand `#timedContainer` contains all the images. Try to refresh only the `
` that contains only the data you need refreshed. — sebastian, Sep 23 '12 at 21:33
Each
is a row though. So all data in there since, each row is dynamic needs to be refreshed unfortunately. — Jordie, Sep 23 '12 at 21:43

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

As far as I know, you'll have to preload/cache the images before displaying them in order to avoid that flash. Here is another answer on how to do that.

edited May 23 '17 at 12:30

Community

1
1

answered Sep 23 '12 at 21:45

tdlm

597
3
14

score 0 · Answer 2 · answered Sep 23 '12 at 21:53

You can use two images, the first reffer to existing img,that does not requere much time to be loaded, and the second real img. The real img can be hidden or their size can be 1*1px.

<img id="IMG1" src="Some_light_IMG" >
<img id="IMG2"src="heavy_IMG" style="display:none;" onLoad="JavaScript:$('#IMG1').hide(); $('#IMG2').show()">

ajax request images are flashing

2 Answers2