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

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