Question

我正在通过推特图片托管服务创建一个图片库，我想在显示之前显示加载图片，但逻辑似乎让我失望。我试着按照以下方式去做：

<ul>
    <li>
        <div class="holder loading">
        </div>
    </li>
    <li>
        <div class="holder loading">
        </div>
    </li>
    <li>...</li>
    <li>...</li>
</ul>

其中“loading”类将动画微调器设置为背景图像。

JQuery的：

$('.holder').each(function(){
    var imgsrc = 'http://example.com/imgsrc';
var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $(this).parent('.holder').removeClass('loading');
        $(this).parent().append(this);
        $(this).fadeIn();
})
.error(function () {
}).attr('src', imgsrc);
 });

哪个不起作用 - 我不确定逻辑是否正确以及如何从img.load嵌套函数中访问“holder”。构建此库的最佳方法是什么，以便图像只有在加载后才会显示？

Answer 1

对于初学者，您没有在此引用网址：

var imgsrc = http://example.com/imgsrc;

应该是：

var imgsrc = 'http://example.com/imgsrc';

试试这个：

$('.holder').each(function(){
    var imgsrc = 'http://example.com/imgsrc';
    var $img = $('<img />', {src: imgsrc});
    $($img).load(function () {
        $(this).hide();
        $(this).parent('.holder').removeClass('loading');
        $(this).parent().append(this);
        $(this).fadeIn();
    });
});

我认为问题是加载事件绑定到图像没有任何src属性（我可能错了，请告诉我它是怎么回事）。

Answer 2

所以经过多次困惑和搜索后，我想出来 - 从嵌套函数中访问持有者，我必须为它创建一个持有者：

$('.holder').each(function(){
   var holder = $(this);
   var imgsrc = 'http://example.com/imgsrc';
   var $img = $('<img />', {src: imgsrc});
   $($img).load(function () {
       $(this).hide();
       holder.removeClass('loading');
       holder.append(this);
       $(this).fadeIn();
   });
});

使用JQuery加载外部图像库

2 个答案: