3

我已将此脚本插入到包含 50 个小图像（从 16x16px 到 50x50px）的网页中：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').css('opacity', '0.0').load(function(){
    $(this).animate({'opacity': '1.0'});
});         
});
</script>

问题是并非所有图像都已加载，并且有些图像没有出现。

为什么 ？

4

5 回答 5

4

当您将其不透明度设置为 0 时，某些图像可能已经加载，因此它们的onload处理程序已经运行并且您没有机会再次使它们可见。

于 2012-05-29T07:56:58.630 回答
3

有可能从缓存中加载了一些图像。如果图像是从缓存加载的，那么load事件将在dom ready事件之前触发。一种方法是

$('img').css('opacity', '0.0').one('load',function(){
    $(this).animate({'opacity': '1.0'});
}).each(function() {
   if(this.complete) $(this).load();
});

这将遍历图像并检查它们是否已从缓存中加载，如果是，则会为这些图像触发加载事件。

而且我使用$.one只运行一次事件处理程序，因为我们不需要它多次执行。

更新：

if(this.complete)将检查图像是否已经加载（在缓存的情况下），如果是，它将load立即为那些触发事件。

而那些不是从缓存中加载的，浏览器会load在加载后为它们触发事件。

因此，上面的代码将涵盖所有图像，无论是否缓存。

于 2012-05-29T08:05:37.553 回答
1

opacity在 CSS 样式中设置默认值，而不是通过 javascript。之后，使用animate.

<style>
     img { opacity:0 }
</style>

<script type="text/javascript">
$(document).ready(function(){
    $('img').load(function(){
        $(this).animate({'opacity': '1.0'});
    });         
});
</script>
于 2012-05-29T08:01:40.727 回答
0

使用预加载图像 javascript 代码...

<script type="text/javascript">
if (document.images) {
    img1 = new Image();
    img1.src = "image.jpg";
    img2 = new Image();
    img2.src = "image2.jpg";
}
</script>

现在所有图像都预加载到客户端机器中并且始终可见....

或者

灵活阵列

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}
于 2012-05-29T07:59:08.897 回答
0

您可以更好地设置 css 中图像的不透明度，例如

img {
opacity:0
}

然后使用您的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').load(function(){
    $(this).animate({'opacity': '1.0'});
});         
});
</script>
于 2012-05-29T08:02:44.030 回答