preload image with jquery

Posted by robertdd on Stack Overflow See other posts from Stack Overflow or by robertdd
Published on 2010-04-20T22:02:08Z Indexed on 2010/04/20 22:13 UTC
Read the original article Hit count: 222

Filed under:
|
|

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>');

        });
};

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 tryed 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