使用jquery使图像淡入图像加载

Question

我有一页充满图像，我希望每个人加载时淡入。我有以下代码，它的作品，但似乎越野车，基本上有时并不是所有的图像淡入。

有没有人有任何建议，如何改善这一点。

感谢

$('.contentwrap img').hide().load(function() { 
    $(this).fadeIn(1000); 
}); 

Answer 1

你打的的document.ready该功能？

$(document).ready(function() { 
     // put all your jQuery goodness in here. 
    }); 

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

有时并不是所有的图像淡入

呀，这通常是一个相当基本的问题：一些图像加载完成您指定它们的负载之前事件处理器。当图像被缓存时，这尤其可能。

如果图像是在HTML的唯一可靠的方法是，不幸的是，包括（极其丑陋）内嵌onload属性：

<img src="..." alt="..." onload="$(this).fadeIn();"> 

Answer 3

你可以首先确保您的图片默认情况下隐藏（不需要再为你的jQuery hide电话）与一些CSS，

.contentwrap img { 
    display:none; 
} 

，然后在你的document.ready，你可以尝试以下。我承认在这里会有一些冗余，因为一些图像可能会（在幕后）试图淡化两次，但最终的结果看起来也是一样的。这是我试图给出一个简单答案的承诺。

这种情况将会出现在你的document.ready中，一些图像可能已经加载（特别是那些已经被缓存了的图像），有些图像可能还未被加载。

// fade in images already loaded: 
$('.contentwrap img').fadeIn(1000); 
// and tell pending images to do the same, once they've finished loading: 
$('.contentwrap img').load(function() { 
    $(this).fadeIn(1000); 
}); 

由于jQuery将“堆栈”你的动画效果，一旦事情是完全消退时，您可以再次调用淡入就可以了，并没有什么应该（明显）发生。

如果这是不可接受的，你可能会设计一些更复杂的方式来检查哪些图像已经淡入，哪些没有，在你设置加载事件之前。

祝你好运！

Answer 4

我最近处理这个烂摊子。我回答这个类似的问题，但它不完全是你在问什么......

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Answer 5

把你的代码，这个函数的内部。如果你使用$（document），它会在dom加载后立即生效。如果你使用身体，它会在身体完全加载后启动。这样，您的图片将在主体加载后始终淡入。

$('body').ready(function() { 
    //your code here 
}); 

Answer 6

我就在这个主题回答了这个过来：jQuery How do you get an image to fade in on load?

对我的作品！

Answer 7

为了处理缓存的图像，bobince的解决方案很有效，但正如他所说的，这很丑陋。

另一种解决办法是隐藏自己的图像，CSS和使用以下的javascript：

$(window).load(function(){ 
    $('.contentwrap img').not(':visible').fadeIn(1000); 
}); 

function showImages() { 
    $('.contentwrap img').load(function() { 
     $(this).fadeIn(1000); 
    }); 
}); 

showImages(); 

这样，大多数图像正确加载，如果他们被缓存起来，并隐藏马上（负载功能没有时间被解雇），页面的加载事件将使它们出现。 页面的加载事件确保一切都已加载。

Answer 8

如果从浏览器缓存中加载图像，则可能不会触发加载事件。为了说明这种可能性，我们可以测试图像的.complete属性的值。

$(document).ready(function() { 

    $('img').hide(); 
    $('img').each(function(i) { 
     if (this.complete) { 
      $(this).fadeIn(); 
     } else { 
      $(this).load(function() { 
       $(this).fadeIn(); 
      }); 
     } 
    }); 
}); 

Answer 9

将这段代码在网站的部分：

<script> 
     $('body').ready(function() { 

     $('img').hide(); 
     $('img').each(function(i) { 
      if (this.complete) { 
       $(this).fadeIn(); 
      } else { 
       $(this).load(function() { 
        $(this).fadeIn(2000); 
       }); 
      } 
     }); 
    }); 
</script> 

这可能不是最有说服力的解决方案，但它能够完成任务。如果你想看到它的一个例子，请查看我使用它的site。

Answer 10

我使用David DeSandro的酷脚本检查图像是否已加载。 （例如，你可以写一个函数，它增加了一个类加载的图像，所以他们会在使用CSS过渡淡出检查出来：
http://desandro.github.io/imagesloaded/

Answer 11

你可以把所有的图像，并把它们放到一个图像和褪色，但他们都在同一时间进来，这将是一个大文件，这取决于你想使用它。