加载后淡入图像
我发现这段代码可以达到理想的效果并在JSFiddle上尝试过
http://jsfiddle.net/AndyMP/7F9tY/366/
它似乎工作在它加载后淡化图像。 然后我在一个网页上尝试了它并且它的工作方式不一样，首先加载图像而不是将其淡入。尽管有时它看起来像是在加载的同时淡入。
是否有更可靠的方法来实现这一点，最好是在可能的情况下修改此代码？
$("#image").ready(function(){ $("#preload").fadeIn(1000); });
fadeIn()实际HTML标记中的图像唯一可靠的方法是在HTML标记中设置一个onload处理程序，如下所示：
这里的工作演示： http ： //jsfiddle.net/jfriend00/X82zY/
这样做，你不需要给每个图像一个id或类。 只需在标记中设置样式和事件处理程序即可。
您必须将事件处理程序放在标记中的原因是，如果您等到页面的javascript运行，则可能为时已晚。 图像可能已经加载（特别是如果它在浏览器缓存中），因此您可能错过了onload事件。 如果将处理程序放在HTML标记中，则不会错过onload事件，因为在图像开始加载之前已分配处理程序。
如果您不想在javascript中放置事件处理程序，那么您可以执行以下操作：在实际HTML中使用占位符表示图像，并使用javascript创建实际图像标记并插入它们并拉出图像占位符的url：
工作演示： http ： //jsfiddle.net/jfriend00/BNFqM/
第一个选项将使您的图像加载更快（因为图像加载在页面解析后立即开始），但第二个选项使您可以对该过程进行更多编程控制。
HTML
JavaScript的
.ready（）不会以你认为的方式触发，请参阅’ load’jQuery事件处理程序
$("#preload").load(function(evt){ $(this).fadeIn(1000); });
对于发现此问题并使用angular.js的人来说可能很有趣：
我写了一个很小的指令来完成这项工作。
JS：
.directive('imgFadeInOnload', function () { return { restrict: 'A', link: function postLink(scope, element, attr) { element.css('opacity', 0); element.css('-moz-transition', 'opacity 2s'); element.css('-webkit-transition', 'opacity 2s'); element.css('-o-transition', 'opacity 2s'); element.css('transition', 'opacity 2s'); element.bind("load", function () { element.css('opacity', 1); }); element.attr('src', attr.imgFadeInOnload); } }; });
HTML：
![]()
通过设置src不在HTML中但在指令代码中，解决了jfriend00（处理器在onload被触发后附加）所提到的问题。
纯java脚本和CSS解决方案：
使用过渡效果与opactiy。
let images = document.getElementsByTagName("img"); for (let image of images) { image.addEventListener("load", fadeImg); image.style.opacity = "0"; } function fadeImg() { this.style.transition = "opacity 2s"; this.style.opacity = "1"; }
应在图像加载后调用fadeIn 。 这是一个例子： http ： //jsfiddle.net/mYYym/
这是基于@jfriend00的答案的css过渡和javascript解决方案，类似于@Robbendebiene的方法：
- 如果关闭js，则提供后退以显示图像
- 只需要一点内联javascript
onload="this.style.opacity=1" - 所有动画都是CSS，不需要jQuery或复杂的javascript
img.fadein { opacity: 1; /* fallback in case of no js */ transition: opacity 500ms ease; max-width: 100%; height: auto; } .js img.fadein { opacity: 0; /* start with hidden image if we have js */ }