用 jquery 预加载图像

Question

更新：

首先附加一个空图像和一个带有一些文本的跨度

隐藏加载图片，加载后显示图片

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();
}); 

旧帖 好的，我花了 2 天时间尝试预加载图像，但没有成功！我有这个功能：

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 是图像的名称

在图像加载时，我希望显示 gif 或文本“正在加载...”。

这个函数会得到这样的结果：

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

我试过这样：

    ...
$.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();
});

...

但是所有<li> 都会隐藏，在加载图像后会出现，我希望<li> 在其中显示 gif 或文本，并在图像加载后链接和图像出现！

如何做到这一点？ 有人有想法吗？ 谢谢！

Answer 1

这绝对是一个没有简单答案的问题。

jQuery: Dynamic image handling (waiting for load)

当我之前询问时，我在那个帖子中得到了一些非常好的建议，而且我绝不是第一个提出问题的人。

总而言之，似乎最好的检查方法是循环一个函数，设置一个时间间隔，然后等待您在每个图像上设置的触发器返回正负载，但我发现，即使它适用于 AJAX 页面加载，它不是防弹的。