不显示图像加载器

我想在图像加载时显示背景图像（loading.gif）。图像加载到感谢名单下面的代码：不显示图像加载器

var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>'); 
var img = item.find('img'); 
img 
    .hide() 
    .one('load', function() { $(this).removeClass('loading').attr('alt', data.title).attr('width', data.width).attr('height', data.height).fadeIn(); }) 
    .attr('src', data.src) 
    .each(function() { if (this.complete) $(this).trigger('load'); });

所以这是一个“加载”类在开始添加到图像，然后这个类被删除，一旦图像完全加载（和显示）。所以CSS代码：

.loading { background: #FFF url(../img/loading.gif) center center no-repeat; }

麻烦的是：加载图像，然后它的显示，但是当图像加载从不显示加载器（由此可以看出here）。我以为我应该删除“.hide（）”...但后来我认为图像将部分显示在它完全加载之前，不是吗？

谢谢你的帮助！

来源

2012-04-28 user1296220

装入IMG第一（用新的图像），然后追加它。这样，您可以在加载时显示微调器。 – mddw 2012-04-28 11:49:16

对不起，但我不明白我应该改变什么...... – user1296220 2012-04-28 11:53:16

那么，如果你创建一个图像，加载它然后附加它，你不必隐藏，所以你可以显示微调。其他解决方案：使用一些CSS将微调器添加到另一个元素中。 – mddw 2012-04-28 11:56:24

这是因为你隐藏它时，它的加载

var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>'); 
var img = item.find('img'); 
$('<img/>').attr('src', data.src).load(function() { 
     img.removeClass('loading').attr('src', data.src).hide().fadeIn(); 
});

来源

2012-04-28 12:06:45 jcubic

但是，这整个事情看起来像它属于循环数据'（var我在结果）{var data = result [i]; ...' – jcubic 2012-04-28 12:10:00

是不是和我的代码一样...没有.hide（）？ – user1296220 2012-04-28 12:10:51

这是不一样的，你有隐藏（外部的DOM）图像，你附加加载事件（当它被加载时执行）和主（可见）图像更改时，此隐藏加载。你的代码将src添加到隐藏的元素。如果你隐藏的东西，它会被隐藏;） – jcubic 2012-04-28 12:15:00

window.onload = function() 
{ document.getElementById("loading").style.display = "none"; }

来源

2012-10-07 10:36:24

不显示图像加载器

回答

相关问题