使用 jquery 使图像在图像加载时淡入

Question

我有一个充满图像的页面，我希望每个图像在加载时淡入。我有以下代码，它可以工作，但似乎有问题，基本上有时并非所有图像都会淡入。

有人对如何改进它有任何建议吗？

谢谢

$('.contentwrap img').hide().load(function () {
    $(this).fadeIn(1000);
});

Answer 1

有时并非所有图像都会淡入。

是的，这通常是一个相当基本的问题：某些图像在为它们分配加载事件处理程序之前就完成了加载。当图像被缓存时，这种情况尤其可能发生。

不幸的是，如果图像位于 HTML 中，唯一可靠的方法是包含一个（极其丑陋的）内联 onload 属性：

<img src="..." alt="..." onload="$(this).fadeIn();">

Answer 2

如果图像是从浏览器缓存加载的，则加载事件可能不会被触发。为了解释这种可能性，我们可以测试图像的 .complete 属性的值。

$(document).ready(function() { 

    $('img').hide();
    $('img').each(function(i) {
        if (this.complete) {
            $(this).fadeIn();
        } else {
            $(this).load(function() {
                $(this).fadeIn();
            });
        }
    });
});

Answer 3

将这段代码放在站点的部分中：

<script>
         $('body').ready(function() { 

        $('img').hide();
        $('img').each(function(i) {
            if (this.complete) {
                $(this).fadeIn();
            } else {
                $(this).load(function() {
                    $(this).fadeIn(2000);
                });
            }
        });
    });
 </script>

这可能不是最有说服力的解决方案，但它可以完成工作。如果您想查看它的实际示例，请查看我使用它的网站。

Answer 4

您可以首先使用一些 CSS 确保默认情况下隐藏您的图像（消除对 jQuery hide 调用的需要），

.contentwrap img {
    display:none;
}

然后，在您的 document.ready 中，您可以尝试以下操作。我承认这里会有一些冗余，因为某些图像可能（在幕后）尝试淡入两次，但最终结果看起来是一样的。这是我在试图给出一个简单答案时承认的权衡。

情况是，在您的 document.ready 中，某些图像可能已加载（尤其是那些已缓存的图像），而某些图像可能尚未加载。

// fade in images already loaded:
$('.contentwrap img').fadeIn(1000);
// and tell pending images to do the same, once they've finished loading:
$('.contentwrap img').load(function () {
    $(this).fadeIn(1000);
});

由于 jQuery 会“堆叠”您的动画效果，一旦某些内容完全淡入，您可以再次对其调用 fadeIn，并且不会（明显）发生任何事情。

如果这是不可接受的，您可能可以设计一些更复杂的方法来检查哪些图像已淡入，哪些尚未淡入，然后再设置加载事件。

祝你好运！

Answer 5

我刚刚在此线程中回答了这个问题： jQuery 如何让图像在加载时淡入？

对我有用！

Answer 6

您在 Document.ready 中调用该函数吗？

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });

http://www.learningjquery.com/2006/09/introducing-document-准备好了

Answer 7

我最近处理了这个烂摊子。我回答了这个类似的问题，但这并不完全是你要问的...

使用 JavaScript 获取图像的真实宽度和高度？ （在 Safari/Chrome 中）

Answer 8

将您的代码放入该函数中。如果你使用 $(document) 它会在 dom 加载后立即工作。如果您使用主体，则一旦主体满载就会启动。这样，在加载正文后，您的图像将始终淡入。

$('body').ready(function() {
    //your code here
});

Answer 9

为了处理缓存的图像，bobince 的解决方案是有效的，但正如他所说，它相当难看。

另一个解决方案是在 css 中隐藏图像并使用以下 javascript：

$(window).load(function(){
  $('.contentwrap img').not(':visible').fadeIn(1000);
});

function showImages() {
  $('.contentwrap img').load(function () {
        $(this).fadeIn(1000);
  });
});

showImages();

这样，大多数图像都会正确加载，如果它们被缓存并立即隐藏（加载函数没有时间被触发），则页面的加载事件会让他们出现。
页面的加载事件确保所有内容都已加载。

Answer 10

我使用 David DeSandro 的酷脚本来检查图像是否已加载。
（例如，您可以编写一个函数，向加载的图像添加一个类，这样它们就会使用 css 过渡淡入淡出。查看一下：
http://desandro.github.io/imagesloaded/

Answer 11

您可以将所有图像放入一张图像中，然后将其淡入，但随后它们都会同时出现，这将是一个大文件。这取决于你想用它做什么。