preload image with jquery

Question

Updated:

firs append a empty image and a span with some text

hide the loading image, after it's load it's show the image

var pathimg = "path/to/image" + "?" + (new Date()).getTime();

$('#somediv').append('<div><span>loading..</span><img  id="idofimage" src="" alt="" ></div>')

jQuery("#idofimage").hide().attr({"src":pathimg})
                .load(function() {
                jQuery(this).show();
}); 

old post ok, I spent 2 days trying to preloaded images but no succes! i have this function:

jQuery.getlastimage = function(id) {
    $.getjs();
        $.post('operations.php', {'operation':'getli', 'id':id,}, function(lastimg){
            $("#upimages" + id).html('<a href="uploads/'+ lastimg +'?'+ (new Date()).getTime() +'"><img class="thumbs" id="' + id + '" alt="' + lastimg + '" src="uploads/' + lastimg +'?'+ (new Date()).getTime() + '" /></a>');

        });
};

lastimg is the name of the image

while the image loading i want to appear a gif or a text "Loading...".

the function will get something like this:

<div class="upimage">
  <ul class="thumbs" id="upimagesQueue">    
  **<li id="#upimagesRIFDIB">
            <a href="uploads/0001.jpg?1271800088379">
                <img src="uploads/0001.jpg?1271800088379" alt="0001.jpg" id="RIFDIB" class="thumbs">
            </a>
    </li>**

    <li>
          ....
    </li>
  </ul>
</div>

i tried like this:

    ...
$.post('operations.php', {'operation':'getli', 'id':id,}, function(lastimg){
$("#upimages" + id)
.html('<a href="uploads/'+ lastimg +'?'+ (new Date()).getTime() +'"><img class="thumbs" id="' + id + '" alt="' + lastimg + '" src="uploads/' + lastimg +'?'+ (new Date()).getTime() + '" /></a>')
.hide()
.load(function() {
    $(this).show();
});

...

but all the <li> will hide and after is loading the image appear, i want the <li> to apear with a gif or a text in it and after the image is loaded the link and the image to apear!

How to do this? Anyone have an idea? Thanks!

Answer 1

It's definitely a question with no easy answer.

http://stackoverflow.com/questions/2546333/jquery-dynamic-image-handling-waiting-for-load

I got a few really great suggestions in that thread when I asked before, and I was, by no means, the first to ask.

By all accounts, it seems the best way to check is to loop through a function, set an interval, and wait for triggers you set on each image to come back positive for load, but I've found that, even though it works well for AJAX page loading, it isn't bulletproof.