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

我有一个页面，我希望我的所有图像在加载后淡入淡出，但要分开，并且我使用以下方法使其正常工作

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

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

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

我整个下午都在研究这个问题，但找不到一个替代方案，可以分别加载和淡入图像。我发现的一种方法是在.load中包含.each函数。这可以检查图像是否已经完成，如果已经完成，只需手动调用.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>

}；。每个函数{

尝试删除分号；否则代码将引发语法错误

记住还要添加一个}；为了你的每一个功能

因此，代码变为

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

}；。每个函数{

尝试删除分号；否则代码将引发语法错误

记住还要添加一个}；为了你的每一个功能

因此，代码变为

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

---

您可以通过现代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
}

---

您可以通过现代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
}

---

可能重复的@user1477388我已经读过该线程，但它不包括浏览器中缓存的图像的解决方案，并在JS之前加载。可能重复的@user1477388我已经读过该线程，但它不包括浏览器中缓存的图像的解决方案，在JS之前加载。这是正确的答案。我试过了，但现在它阻止任何图像加载。在开发工具中，我看到了SyntaxError：输入意外结束-请查看我的更新问题，了解我目前拥有的内容，我只是缺少一个}；非常感谢！这是正确的答案。我尝试过这个，但现在它阻止任何图像加载。在开发工具中，我看到了SyntaxError：输入意外结束-请查看我的更新问题，了解我目前拥有的内容，我只是缺少一个}；非常感谢！