Question

假设我有div而div有很多像

的图像

<div id="main">
<img src="~/images/img_1.png">
<img src="~/images/img_2.png">
<img src="~/images/img_3.png">
<img src="~/images/img_4.png">
<img src="~/images/img_5.png">
<img src="~/images/img_6.png">
</div>


$('DIV.example').each(function() {
if(this.complete) {
//remove spinner and show actual image
}
});

当特定div中的所有上述图像都将被加载时，我想显示微调器忙图像，哪个将完全下载到客户端然后我想显示实际图像而不是微调器。

我希望代码以这种方式检测哪个图像已完全下载，然后将微调器图像网址替换为特定div的实际图像，而不是我页面中的所有图像。

感谢

它是否有效....有人建议我这个代码。

<div id="main">
<img src="~/images/busy.png" data-src='"~/images/img_1.png"'>
<img src="~/images/busy.png" data-src='"~/images/img_2.png"'>
<img src="~/images/busy.png" data-src='"~/images/img_3.png"'>
<img src="~/images/busy.png" data-src='"~/images/img_4.png"'>
<img src="~/images/busy.png" data-src='"~/images/img_5.png"'>
</div>

$('#main img').each(function() {
   $(this).attr('src',$(this).attr('data-src'));
}).removeAttr('data-src');

如何确定这里的data-src图像文件是否已经下载？ plzz指南。感谢

thisTab.find('img[data-src]').each(function() {
$(this).attr('src', $(this).attr('data-src'))
       .removeAttr('data-src');

}）;

Answer 1

使用load事件来检测元素是否已加载。例如，

CSS

#main img { display: none; }

JS

$('#main img').each(function() {
   var loader = $('<img src="/images/loader.gif" />');
   $(this).after(loader).load(function() { loader.remove(); $(this).show(); });
   loader.show();
});

Answer 2

更新了未经测试的示例。

HTML

＆LT; div class = main＆gt;

＆LT; div class = main＆gt;

＆LT; div class = main＆gt;

＆LT; div class = main＆gt;

你可以使用asp：listview来呈现html。

css：

background: url('spinner.gif') no-repeat center center;
width: 30px;
height: 30px;
display: inline;
float: left;
position: relative;

js功能

function imageLoad（）{

        var loader = $('.main');

        loader.each(function(i){
            var img = new Image();
            $(img).load(
                 function() {
                     $(this).hide();

                     loader[i].append(this);

                     $(this).fadeIn(1000);
             })


            $(img).attr('src', 'ur/actual/image/url');
         })


    }

使用jquery按需映像加载

2 个答案: