javascript - 如何编写加载特定图像后消失的加载屏幕？

Question

我有一个视差一页滚动、响应式作品集，其中包含许多不同的项目。 如果访问者点击该项目，每个项目都会触发一个最多包含 15 个图像的模式。

我一开始有一个使用 JavaScript 的 GIF 加载打开动画，因此访问者只有在整个页面加载时才能看到网站，甚至每个项目内部的图像只有在用户单击项目时才会出现(它是一页滚动):

$(window).load(function() { 
    $(".loader").fadeOut("slow");
})

由于图像数量众多，目前访问该作品集需要 30 秒到 1 分钟

有人知道一种方法吗: - 首先加载一些图像(主页背景、每个项目的缩略图等) - 仅当加载这些图像时才将加载屏幕保留在开头 - 加载这些图像时，加载开始屏幕会消失，以便访问者可以开始浏览作品集，而不必为此等待 30 秒 - 当他浏览页面时继续加载其他图像(因此现在仅当访问者在访问“主”页面时单击项目时才加载出现在模式内部的图像)

感谢您的帮助!

Answer 1

img 标签有 load 事件。例如，你可以控制它们 考虑您的图像具有类 .preloaded-image，我们为每个图像创建一个标志 了解加载了哪个项目。我们将为每个类添加一个类，例如 image-loaded， 当图像加载完成时:

$('.preloaded-image').on('load', function () {
    // set the flag
    $(this).addClass('image-loaded');

    // run the callback
    showPage();
});

function showPage() {
    // we check for all images
    // if all images has loaded
    // we'll show the page
    var items = $('.preloaded-image').length;
    var loaded = $('.image-loaded').length;

    // if items and loaded are equal
    // all images has loaded
    if (items != loaded) {
        // do nothing as all images hasn't loaded yet
        return;
    }

    // all images has loaded
    // show the page
    alert('I will show the page');
}