jquery load image into div strange behaviour

Question

I've made slideshow with thumbnails at it's side.

Here, basically a div which displays the image and after clickimg on a particular thumbnail, it's related picture will be dynamically displayed in the main div (#display #slideshowpic). Here is the code example,

<div id="container">
    <div id="display">
      <img id="slideshowpic" src="initial.jpg">
    </div>

    <div id="thumbs">
      <img class="thumb" id="image1">
      <img class="thumb" id="image2">
      <img class="thumb" id="image3">
      <img class="thumb" id="image4">
      <img class="thumb" id="image5">
   </div>
</div>

And here is the javascript,

$('.thumb').click( function() {
        $('#slideshowpic').attr('src',"");   /// clears or removes current image
        $('#slideshowpic').attr('src',"/uploads/" + $(this).attr('id') + ".jpg");
});

Here, the image which is to be loaded in the main div after clicking thumbnail, is progressive image which is interlanced with php gd.

This is working perfectly in firefox. After clicking thumbnail, the image instantly displays in the main div with progressive fasion. But it doen't seems to be working in chrome.

The Problem is (chrome) : After clicking the thumbnail; first the image is cleared as per the code, then the previous image displays instead of new image (clicked image) and then new image displays after taking some time delay (i think the delay is the time which new image is taking to load).

google chrome doesn't show image till it loads image fully

I just can't figure out where is the problem is. Should i use another technique to load that dynamic image.. ? please help. I stucked in it from many days.

EDIT : you can check it in below links,

Click the thumbnails to load the slideshow.

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

<img> without src has no reason...

$('.thumb').click( function() {

        var img = $('#slideshowpic');
        var src = $(this).attr('id');

        img.css('opacity','0').on('load', function() { 
             $(this).fadeIn();
        }).attr('src',"/uploads/" + src + ".jpg");


});

from Detect image load

edited May 23 '17 at 12:05

Community

1
1

answered Oct 17 '14 at 16:34

alquist42

739
1
8
21

what is the need of `setTimeout( function() {img.fadeIn()}, 500); ` – Sohan Patel Oct 17 '14 at 16:39
I'm having css3 animated div as a background of the div instead of `loader gif`. So there is not need of that gif. when image would be loaded then it will automatically hidden by it. – Sohan Patel Oct 17 '14 at 16:41
to wait, while image is loading. You'll show the image 0.5sec after changing `src` – alquist42 Oct 17 '14 at 16:44
why use of wait instead the image should be displayed in progressively. – Sohan Patel Oct 17 '14 at 17:05
"Detact image load" function will fired when the whole image will load. But i want to display image in progressive fashion. Since the image is too big. – Sohan Patel Oct 17 '14 at 17:07
You can try `.remove()` whole img tag and `.append()` new one – alquist42 Oct 17 '14 at 17:09

score 0 · Answer 2 · answered Oct 17 '14 at 16:38

0

Seems like firefox uses the image cache and chrome doesn't. I have used magnific popup, http://dimsemenov.com/plugins/magnific-popup/ It has a built-in prefetch for galleries.

answered Oct 17 '14 at 16:38

PaulH

2,918
2
15
31

I can't use any readymade plugins. since i'm having only problem with chrome. – Sohan Patel Oct 17 '14 at 16:42

score 0 · Answer 3 · answered Oct 17 '14 at 17:25

0

Try this method:

img = new Image(); // this is important
img.src = src; // new src for the image.
img.onload = function () {
    //Your logic. Replace the original image with the new one.
};

Instead of modifying the src of the image, try replacing the img tag with the new one when the new image is loaded. This should work for you. The issue is mainly because of the caching in chrome.

answered Oct 17 '14 at 17:25

K K

17,794
4
30
39

Thanks for your answer. But why it's not displaying the image in progressive fashion. Instead it is displaying after whole image is loaded. – Sohan Patel Oct 17 '14 at 17:53

jquery load image into div strange behaviour

3 Answers3