加载时显示img fadeIn效果

Question

我在 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;
        }
    });
});

Answer 1

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

Answer 2

这似乎是这样工作的。

JS :

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

加载时显示img fadeIn效果

display img fadeIn effect during loading

javascript

jquery

load

image

fadein