0

我正在尝试使我网站的所有图像都显示为淡入效果，例如 www.blu-ray.com，但还没有运气。

不幸的是，我这样做的方式是，由于我的网页正文有点大，图像开始出现并在$(document).ready之前呈现，所以当 DOM 准备好时，我正在使用的脚本将导致已经加载图像隐藏并重新出现！有没有办法阻止图像在页面开始加载时出现并使其可见性变为“隐藏”？

请不要使用 CSS！这是我正在使用的脚本：

jQuery(document).ready(function() {
    jQuery('img').css("opacity", 0).css("visibility", "hidden");
    jQuery('img').each(function(i) {
        if (this.complete) {
            jQuery(this).css("opacity", 1).css("visibility", "visible");
        } else 
            jQuery(this).load(function() {
                jQuery(this).css("opacity", 0).css("visibility", "visible").animate({opacity: '1'}, 'slow');
            });
    });
});

任何帮助表示赞赏。

4

1 回答 1

1

使用 CSS 设置可见性

CSS

img{
   visibility:hidden;
}

JS

jQuery(document).ready(function() {
   jQuery('img').load(function() {
       jQuery(this).css({"opacity": 0, "visibility": "visible"}).animate({opacity: '1'}, 'slow');            
    });
});
于 2013-05-12T18:46:36.893 回答