1

I've done some searching/troubleshooting to no avail. I have a simple picture viewer and I added in the JQuery .load() function to make the animation wait to fade back in until the image has loaded. This aspect works great, but it's caused a weird error. If you look through the pictures with the arrows, it begins to develop a weird lag that happens BEFORE the fadeout (fadeTo(200,0)). This makes no sense to me because there's nothing before that line that should cause lag.

(note, this lag does NOT happen when the .load() function is not present)

Here is the JQuery code for the next button (arrow button on left). "largeImage" is the main image you see.

Go to http://www.snowtheband.com/temporary/media.html and click on one of the thumbnails under "picture" to get to the picture viewer.

$("#nextButton").click(function(){
    picNumber=parseInt(picNumber);
    if (picNumber<7){
        picNumber+=1;
        picClass="."+picNumber;
        var loadPic="images/photos/"+picNumber+"_large.jpg";
        descText=$(picClass).prop("alt");
        $("#description").fadeTo(200,0,function(){
            $("#description").html(descText).fadeTo(200,1);
        });
        $("#largeImage").fadeTo(200,0,function(){
            $("#largeImage").prop("src",loadPic);
            $("#imagecontainer img").load(function(){
                $("#largeImage").fadeTo(200,1);
            });
        });
    };
});
Mikhail Chernykh
  • 2,659
  • 22
  • 15
Joel Worsham
  • 1,140
  • 1
  • 7
  • 19
  • set the src after you bind the load event, otherwise you may run into issues when the image is cached. – Kevin B Apr 17 '13 at 19:50
  • This is because your content is loading really slow. You should preload your images: http://stackoverflow.com/questions/476679/preloading-images-with-jquery – Mikhail Chernykh Apr 17 '13 at 19:52
  • 2
    There's nothing weird about it. Every time `#nextButton` is clicked, its handler attaches another 'load' handler to `#imagecontainer img` images ... then another ... and another ... – Beetroot-Beetroot Apr 17 '13 at 20:03

2 Answers2

0

That happens because your browser only starts to retrieve the image, after you set your source. Only when it finishes the loading of the image that the load will trigger.

You have to preload the image if you want this to run smooth.

fmsf
  • 36,317
  • 49
  • 147
  • 195
  • There could be hundreds of images in the future and I'd rather only load them as the user enlarges them. Any other alternatives? – Joel Worsham Apr 17 '13 at 23:14
0

To make it smoothly, please do the following:

  1. Minimize image sizes (400-600 kb per image is quite a lot. You can compress images 1.5-2 times).
  2. If you have admin rights, try to optimize your server performance. It responds slow.
  3. Use preload mechanism for all your images in your slide show. Read more about preloading in this topic: Preloading images with jQuery

I recommend you to implement preloading this way:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
$(function() {
    var images = [], i;
    for (i = 0; i < 7; i += 1) {
       images.push("images/photos/" + (i + 1) + "_large.jpg");
    }
    $(images).preload();
});

Update: fixed the script. There was a syntax error.

Community
  • 1
  • 1
Mikhail Chernykh
  • 2,659
  • 22
  • 15