2

I'm using jQuery to load content dynamically when the user clicks a link. The content is just a bunch of images that are then set to display in a slideshow of sorts. My problem is, I can't seem to figure out a way to show the loaded content only AFTER the images have fully loaded. I've tried several different solutions and all of them seem to either break the script or just not work the way I want. Here's the code I'm using now:

$(document).ready(function() {

$("a#item").click( function() {

   var projectName = $(this).attr('class');

   $("div.slideshow").css("display", "block");

   $("div.slideshow").load(projectName+".php", function() {

        var slideshow = new Array();

        $("div.slideshow img").each(function() {
            slideshow.push($(this));
        });

        startSlideshow(slideshow.shift());

        function startSlideshow(image) {
            image.delay(400).fadeIn(150, function() {
                if(slideshow.length > 0) {startSlideshow(slideshow.shift());}
                else { $("div.slideshow").delay(400).fadeOut(200, function() {$("div.slideshow img").css("display", "none")}); }

            });
        }
   });

   return false;

});

});

You can also see the full demo site here: http://publicprofileproject.com/

Any input would be greatly appreciated!

Chris
  • 57
  • 8

2 Answers2

2

You could create an array of image objects in your JavaScript, loading each image into an element of the array. Attach an event handler to the onLoad event of the images.

In the event handler, increment a count of loaded images. When your counter reaches the length of your array, the browser will have all of the images. This is the point at which you can show your slideshow.

If you do this in your page load, it will have the added advantage of pre-loading the images ready for when the user clicks your link.

Chris Roberts
  • 18,622
  • 12
  • 60
  • 67
  • I think I understand what you're saying. I think my problem is that I have a few different "slideshows" on the same page, and each is triggered when the user clicks a link. Would I still be able to use a counter for each individual link? If you need to see the page, I put a link to the working example in my original post. Thanks for the answer! – Chris Apr 24 '12 at 19:34
  • You could do it as the user clicks the link, you just wouldn't get the advantage of pre-loading. – Chris Roberts Apr 24 '12 at 20:01
1

I believe this question has already been answered here.

The general idea is that you specify a load event handler to display it prior to specifying the source attribute.

Alternatively, if your projects+".php" file is specifying the images in ready-made, html mark-up, then you should be able to capture the load event of the images in the file you are loading. Add the following pseudocode into your file that is being loaded.

$("img").load(function() {
    // show the div on the page it is getting loaded into
    alert("images should be loaded now");
});

You might be able to place it in your original code segment and potentially bind it using the live / on binding events. ex: $("img").on("load", function() {...

From the load documentation:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Edit: Interesting discouragement for doing what it looks like you're doing:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • It doesn't correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser's cache
Community
  • 1
  • 1
veeTrain
  • 2,915
  • 2
  • 26
  • 43
  • Will this solution also work when dealing with html? I see that in the example it's an image url. – Chris Apr 24 '12 at 19:30
  • @paperbeatsscissors; I updated my answer with another possibility for you. My selector is more vague than yours probably should be -- and you might be able to put that capturing event in your original javascript. – veeTrain Apr 24 '12 at 19:33
  • Awesome, I hadn't tried the "on" option. I tried binding the load event to the start of the slideshow, but it got really erratic and jumpy and kept fading out in the middle of the list of items. Although, it's entirely possible I just put it in the wrong place... – Chris Apr 24 '12 at 19:44
  • @paperbeatsscissors; this may have been bad advice. The `.load()` event seems to discourage this usage; I've updated my post but I'm not exactly sure where you should head next. Be sure to update your question if you find an answer not involving `load`. – veeTrain Apr 24 '12 at 19:52