Question

我正在尝试通过将加载效果放置在所有img标签的位置来减少我的网站的加载时间，一旦图像加载，加载效果应消失并且实际图像应在容器中淡出。

我当前的尝试如下所示：

图像按如下放置在标记中：

foreach ( $results['gallery'] as $gallery ) {
    $imgName = $gallery->photo;
    array_push($pictures, $gallery->photo);
    echo '<img class="photo" src="'.$path.$imgName. '" alt="">';
}

js：

$(document).ready(function() {
    $(".photo").hide().each(function() {
        var loader = new Image();
        $(loader).hide();
        $(loader).on('load', function() {
            console.log($(this).attr('src') + " loaded");
            $(this).fadeIn(700);
        })
        loader.src = $(this).attr('src');

    });
});

理想的结果是将每个src放置到Image（）对象中，一旦设法将图片加载到背景中，则当前的.photo应该淡入。

但是，实际上发生的是，即使console.log语句尚未出现在控制台中，该图像也已经显示，并且用户可以看到浏览器正在缓慢加载该图像（我们谈论的是10 + MB图片，因此在节流连接上，即使在.js中，这段代码似乎也没有。

这种当前方法的另一个问题是图像似乎开始从标记的底部开始加载（例如，标记中的最后一张图像是第一个要加载的图像），我也没有设法解决。

我还尝试过最初将源放入data-src标签中，对其进行迭代并以类似的方式逐一加载（利用Image对象），并且在加载时img标签将设置其src，但是这根本没有用。如何修改当前方法，以便onload实际起作用？

在大型画廊中一次加载一张图片

0 个答案: