加载时显示 img fadeIn 效果答案

【问题标题】：display img fadeIn effect during loading加载时显示 img fadeIn 效果
【发布时间】：2018-02-15 18:37:25
【问题描述】：

在loading 期间，我没有设法找到display 我的马赛克的img 和fadeIn 效果的方法。

HTML：

<ul id="mosaic">
     <li  class="item"><img src="img/art1.jpg" alt="Woman in yoga position with a smoke effect"></li>
     <li  class="item"><img src="img/art2.jpg" alt="Woman in yoga position with a paint effect"></li>
     <li  class="item"><img src="img/art3.jpg" alt="Woman face with a paint effect"></li>
     <li  class="item"><img src="img/art10.jpg" alt="Woman dancing hip-hop with a paint effect"></li>
     <li  class="item"><img src="img/art5.jpg" alt="Man with a paint effect"></li>
     <li  class="item"><img src="img/art2.jpg" alt="Woman in yoga position with a paint effect"></li>
     <li  class="item"><img src="img/art4.jpg" alt="Woman face with a paint effect"></li>
     <li  class="item"><img src="img/art2.jpg" alt="Woman in yoga position with a paint effect"></li>
     <li  class="item"><img src="img/art7.jpg" alt="Woman with a paint effect"></li>
</ul>

JS：

$(function() {
    $('#mosaic').find('img').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;
        }
    });
});

【问题讨论】：

我想说你的方法可能不是你想要达到的最好的。为什么要在 img 元素中附加一个 img 元素？另外请在 img.onload 函数声明的顶部添加 img.src = src。
真的不知道，我尝试了太多东西......你有更好的方法吗？

标签： javascript jquery image load fadein

【解决方案1】：

试试$(this).hide().fadeIn(1000);

【讨论】：

【解决方案2】：

看起来像这样工作。

JS：

$(function() {
    var img = $('#mosaic').find('img');
    img.css('opacity', '0');
    $(window).on('load', function() {
        img.fadeTo(1500, 1);
    });
});

【讨论】：