淡出后，他们已加载

Question

我发现这个代码，以达到预期的效果，并试图在的jsfiddle

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

看来工作在它消失在它加载后的图像。然后我在网页上试了一下，它的工作方式并不一样，首先加载图片而不是淡入图片。尽管有时它好像在加载的同时淡入图片。

是否有一个更可靠的方法来实现这一点，最好是通过修改此代码如果可能？

Answer 1

fadeIn()实际HTML标记中的图像的唯一可靠方法是设置一个onload处理程序的HTML标记是这样的：

<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来创建实际的图像标签并插入它们从占位符拉图像URL：

<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

fadeIn应在图像加载后调用。这里有一个例子： http://jsfiddle.net/mYYym/

Answer 3

HTML

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

的JavaScript

。就绪（）不火他们的方式，你认为它，请参阅'load' jQuery的事件处理程序

$("#preload").load(function(evt){ 
     $(this).fadeIn(1000); 
}); 

Answer 4

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

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

Answer 5

也许有趣的谁找到这个问题，并使用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：

<img img-fade-in-onload="{{imgSrc}}" src=""> 

由于没有在HTML，但在该指令代码由jfriend00提到的问题（处理所附着的onload之后触发）设置src是解决了。

Answer 6

这里的一个CSS过渡和基于@ jfriend00的回答和类似@Robbendebiene的方法的javascript溶液：

• 提供回退以显示图像，如果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 */ 
 
}

<!-- use moderinr to provide the "js" class on the html element --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 
 
<img class="fadein" onload="this.style.opacity=1" src="http://lorempixel.com/1500/1500/">