php - Load html with ajax, but hide content until loaded

782

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!

982

Answer

Solution:

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.

997

Answer

Solution:

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 yourprojects+".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 thelive /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

People are also looking for solutions to the problem: php - Player multi urls

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question