用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：动态图像处理（等待加载）

之前我问过这个问题时，我得到了一些非常好的建议，而我绝不是第一个问这个问题的人。

众所周知，最好的检查方法似乎是遍历一个函数，设置一个间隔并等待在每个图像上设置的触发器返回正值以进行加载，但是我发现，即使它运行良好对于AJAX页面加载，它不是防弹的。