加载后淡入图像

Question

我找到了这个代码来实现所需的效果并在JSFiddle上尝试过

http://jsfiddle.net/AndyMP/7F9tY/366/

它似乎工作在它加载后淡化图像.然后我在一个网页上尝试了它并且它的工作方式不一样,首先加载图像而不是将其淡入.尽管有时它看起来像是在加载的同时淡入.

是否有更可靠的方法来实现这一点,最好是在可能的情况下修改此代码？

$("#image").ready(function(){ $("#preload").fadeIn(1000); });

Answer 1

fadeIn()实际HTML标记中图像的唯一可靠方法是在HTML标记中设置onload处理程序,如下所示:

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

这里的工作演示:http://jsfiddle.net/jfriend00/X82zY/

这样做,你不需要给每个图像一个id或类.只需在标记中设置样式和事件处理程序即可.

您必须将事件处理程序放在标记中的原因是,如果您等到页面的javascript运行,则可能为时已晚.图像可能已经加载(特别是如果它在浏览器缓存中),因此您可能错过了该onload事件.如果将处理程序放在HTML标记中,则不会错过该onload事件,因为在图像开始加载之前已分配处理程序.

如果您不想在javascript中放置事件处理程序,那么您可以执行类似这样的操作,在实际HTML中使用占位符作为图像,并使用javascript创建实际图像标记并插入它们并拉出图像占位符的网址:

<div>
    <span class="fadeIn" data-src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

工作演示:http://jsfiddle.net/jfriend00/BNFqM/

第一个选项将使您的图像加载更快(因为图像加载在页面解析后立即开始),但第二个选项使您可以对该过程进行更多编程控制.

Answer 2

纯Java脚本和CSS解决方案：

巧妙地使用过渡效果。

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";
}

<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/g/400/200/">
<img src="http://lorempixel.com/400/200/sports/">