display img fade加载过程中的效果

Question

在display期间，我没有设法找到fadeIn my loading img <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> 效果的方法。

HTML：

$(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;
        }
    });
});

JS：

Reports > Phone

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