Question

我有一个页面，我希望我的所有图像一旦加载就会淡入，但是单独使用以下内容我可以正常工作...

<style>
img.imgfade {display:none;}
</style>

<script>
$(document).ready(function() {  
    $('img.imgfade').load(function() {  
        $(this).fadeIn('slow');  
    });
});  
</script>

我在这里遇到的问题是，在离开页面后再返回，图像不再存在。这可能是因为它们已经存储在浏览器缓存中，因此在我的javascript运行之前已经加载了。

我整个下午一直在研究这个问题，但找不到图像加载和单独褪色的替代方案。我发现的一种方法是将.each（）函数包含在.load（）中。每个都可以检查图像是否已经完成，如果是，只需手动调用.load（），但是当我添加它时，图像甚至不会第一次加载。

<script>
$(document).ready(function() {  
    $('img.imgfade').load(function() {  
        $(this).fadeIn('slow');  
    });.each(function() {
    if(this.complete) {
        jQuery(this).load();
    }
});  
</script>

已解决：问题已在下面解决，所以我正在分享我的完整代码，因为它可以帮助其他任何人。这将在加载时逐个淡入您的图像，并且在您返回页面时也不会受到浏览器缓存图像的影响。

    <style>
    img.imgfade {display:none;}
    </style>

    <script>
    (function ($) { 
    $(document).ready(function() {  
        $('img.imgfade').load(function() {  
            $(this).fadeIn('slow');  
        })
    .each(function() {
        if(this.complete) {
            jQuery(this).load();
        }
    });
    })(jQuery);
    </script>

Answer 1

});.each(function() {

尝试删除分号;，否则您的代码会引发语法错误。

请务必为});

添加each(function()... )

所以代码变成了

...
})
.each(function() {
    if(this.complete) {
        jQuery(this).load();
    }
});

Answer 2

你可以通过现代CSS3过渡和onload属性来实现这一点：

<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="this.classList.add('show')">

img {
    opacity: 0;
    -webkit-transition: 1000ms opacity;
    -moz-transition: 1000ms opacity;
    -ms-transition: 1000ms opacity;
    -0-transition: 1000ms opacity;
    transition: 1000ms opacity;
}

img.show {
    opacity: 1
}

Example

当然，我使用带有this.classList的香草JS，如果你需要older browser support可能不适合你

但你可以随时换掉jQuery：$(this).addClass('show')

以下是使用jQuery执行淡入淡出的示例：

<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="$(this).fadeIn(1000)">

img {
    display: none;
}

浏览器缓存图像可防止淡入

2 个答案:

Example

Example