preload image with jquery
- by robertdd
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!
