不显示图像加载器答案

【问题标题】：Image loader isn't displayed不显示图像加载器
【发布时间】：2012-04-28 11:32:25
【问题描述】：

我想在图像加载时显示背景图像 (loading.gif)。图像加载thanx到以下代码：

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()”...但是我认为图像将在完全加载之前部分显示，不是吗？？？

感谢您的帮助！

【问题讨论】：

首先加载img（带有新图像），然后附加它。这样，您可以在加载时显示微调器。
对不起，我不明白我应该准确地改变什么......
好吧，如果你创建一个图像，加载它然后附加它，你不必隐藏，所以你可以显示微调器。其他解决方案：使用一些 CSS 在另一个元素中添加微调器。
所以我可以只改变最后一部分，像这样吗？ img.one('load', function() { $(this).attr({src: data.src, alt: data.title, width: data.width, height: data.height}).fadeIn(); }).attr('src', '../img/loading.gif').each(function() { if (this.complete) $(this).trigger('load'); });这样可以吗？？？
当你只有一个元素时调用每个元素。

标签： jquery image loader

【解决方案1】：

因为你在加载的时候隐藏了它

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

【讨论】：

但这整件事看起来属于数据循环for (var i in result) { var data = result[i]; ...
不一样，你已经隐藏（在 DOM 之外）图像，并且你将加载事件附加到它（所以它在加载时执行）并且当这个隐藏时主（可见）图像被改变加载。并且您的代码将 src 添加到隐藏元素。如果您隐藏某些内容，它将被隐藏；）
嗯...不太明白（对不起，我远不是你所看到的专业人士）：不应该是img.attr etc.而不是$('<img/>').attr etc.吗？
这是不同的元素，新元素，已附加负载。加载此隐藏图像时，它不会显示在您设置 img.attr 的页面上。 2 张图片。
那么，让我看看我是否理解您的意思：以下代码是否正确？ $('') .one('load', function() { img.removeClass('loading').attr({src: data.src, alt: data.title, width: data.width,高度：data.height}).fadeIn(); }) .attr('src', data.src) .each(function() { if (this.complete) $(this).trigger('load'); });

【解决方案2】：

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

【讨论】：