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>

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

Answer 4

你可以首先确保你的图像默认是隐藏的（不需要你的jQuery hide调用）和一些CSS，

.contentwrap img {
    display:none;
}

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

情况将是在你的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 How do you get an image to fade in on load?

适合我！

Answer 6

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

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

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 7

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

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Answer 8

将您的代码放在此函数中。如果您使用$（文档），它会在加载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

您可以拍摄所有图像并将它们放入一张图像中并将其淡入，然后它们全部同时进入，这将是一个大文件。这取决于你想用它做什么。

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

11 个答案: