奇怪的jQuery问题

Question

我已经在网页中插入了这个脚本，该网页含有50张小图片（从16x16像素到50x50像素）：

<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>

问题在于并非所有图片都被加载，有些图片没有出现。

为什么？

- xRobot

---

.load()是什么？你是在尝试发起Ajax调用吗？ - Royi Namir

.load(function) 附加一个 onload 事件处理程序；方法名称与 ajax-ey 的 .load(url) 共享。 - lanzz

你能提供一个 HTML 示例吗？ - Sagiv Ofek

HTML非常简单（带有50个img标签），并且没有使用jQuery，它可以完美地工作。 - xRobot

可能有几个原因，这可能与您有关：https://dev59.com/sW035IYBdhLWcg3wGMDZ#5624901 - Christian

Answer 1

当你将某些图片的不透明度设置为0时，这些图片可能已经被加载完成，这意味着它们的onload处理程序已经运行并且您没有机会再次使它们可见。

- lanzz

---

那么，做这个动画的最佳方式是什么？谢谢。 - xRobot

不要直接在HTML中呈现图像。使用jQuery创建图像实例，并在设置它们的src属性之前附加onload处理程序。 - lanzz

Answer 2

有可能一些图片是从缓存中加载的。如果图片从缓存中加载，则在dom ready事件之前，load事件就会触发。解决这个问题的一种方法是：

$('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 事件。

因此，上述代码将覆盖所有图像，无论是缓存还是非缓存。

- Prasenjit Kumar Nag

---

如果我想对每个图像（缓存和非缓存）进行动画，我该怎么做？ - xRobot

这将为所有缓存或非缓存的图像执行动画。 :) - Prasenjit Kumar Nag

我已经测试过了，现在所有的图像都被加载了，但是动画只在未缓存的图像上工作 :( - xRobot

你能分享一下链接吗，这样我就可以检查一下了吗？ - Prasenjit Kumar Nag

Answer 3

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

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

<script type="text/javascript">
$(document).ready(function(){
    $('img').load(function(){
        $(this).animate({'opacity': '1.0'});
    });         
});
</script>

- lqez

Answer 4

使用预加载图像的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];
        }
    }
}

- Gaurav Agrawal

---

这很混乱而且重复。原帖作者说他们有大约50张图片。这需要很多JavaScript代码，而且你的代码示例甚至没有将图像附加到文档中。 - Bojangles

好的，那么您可以使用数组代码：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] + '" />');// 写入页面（取消注释以检查图像） imageObj.src=images[i]; } } } - Gaurav Agrawal

Answer 5

你可以使用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>

- Uttara