preload image with jquery

Posted by robertdd on Stack Overflow See other posts from Stack Overflow or by robertdd
Published on 2010-04-21T15:06:40Z Indexed on 2010/04/24 7:03 UTC
Read the original article Hit count: 246

Filed under:
|
|
|

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!

© Stack Overflow or respective owner

Related posts about image

Related posts about loading