的HTML

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

的HTML

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

的javascript

.ready（）不会按照您认为的方式触发，请参阅'load' jQuery事件处理程序

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

Answer 3

纯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 4

对于发现此问题并使用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="">

通过设置src不在HTML中但在指令代码中，解决了jfriend00提到的问题（处理程序在onload被触发后附加）。

Answer 5

加载图像后应调用

fadeIn。这是一个例子： http://jsfiddle.net/mYYym/

Answer 6

这是一个基于@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 */
}

<!-- 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/">

Answer 7

对于那些在 8 年后寻找现代紧凑型非 jquery 版本的人（像我一样）。如果下面插入的代码没有正确呈现，请尝试下面的小提琴，它有效

小提琴：http://jsfiddle.net/s6nvb95z/

fadeIn = e => e.style.opacity = 1;

img {
   width: 500px; // Just for this example
   opacity: 0;
   transition: opacity .2s ease-out;
}

<div id="image">
    <img onload="fadeIn(this)" src="https://live.staticflickr.com/4672/39593615781_fe8e95a6fb_k.jpg" />
</div>

加载后淡入图像

7 个答案:

的HTML

的javascript