Question

我试图弄清楚如何将我网站上的所有图片都淡入，因为它看起来很棒，但是使用此代码需要使用所有图像＆＃34; onload＆＃34;这是不切实际的。

•理想情况下，让所有img使用此效果，任何想法都会很好吗？

以下我使用的演示看起来很棒，但我将时间更改为300毫秒：

HTML

<img onload="this.style.opacity='1';" src="image.jpg" />

CSS

img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}

实施例： jsfiddle

您认为对此有什么好的解决方案？

Answer 1

我有一个jQuery解决方案。

只要它们全部加载，这将同时淡入所有图像。

删除CSS并使用此jQuery代码（您需要首先在页面中包含jQuery）

$(window).load(function () {
   $('img').fadeIn(2000); 
});

你可以先在jQuery中隐藏图像：

$(function () {
   $('img').fadeOut(0); 
});

http://jsfiddle.net/s72s9Lsv/

您还可以使用带有setTimeout（）的each（）函数来执行延迟的淡入淡出，以便它们在不同的时间出现。

但这是我对这个问题的真正问题。毫无疑问，你会在其他网站上看到这种效果。它不仅仅是一种效果，它是一种被称为“延迟加载”的技术（您也可以为此下载一个jQuery脚本）。这意味着当页面加载时 - 它加载时没有图像。很快。然后一次一个，javaScript进来并开始加载这些图像的URL - 有时甚至等到你向下滚动页面足以使图像相关。你看到的淡入效果只是他们做出的选择，这样图像就不会以令人不安的方式眨眼。

懒惰加载很酷，如果你以前从未做过，你应该试一试。你会以自己为荣。

淡入所有img标签的图像而不使用额外的ID？

1 个答案: