Javascript 如何对加载特定图像后消失的加载屏幕进行编码？

我有一个视差一页卷轴，与许多不同的项目，响应投资组合。 如果访问者单击该项目，每个项目都会触发一个最多包含15个图像的模式

我有一个使用JavaScript的GIF加载开始动画，因此访问者只有在加载整个页面时才能看到网站，甚至每个项目中的图像也只有在用户单击项目时才会出现（这是一个单页滚动）：

由于图像众多，目前访问公文包需要30秒到1分钟

有人知道如何： -首先加载一些图像（主页的背景、每个项目的缩略图等） -仅当加载这些图像时，才将加载屏幕保持在开始位置 -当这些图片被加载时，让加载开始屏幕消失，这样访问者就可以开始浏览公文包，而不必等待30秒 -在浏览页面时继续加载其他图像（因此，现在仅当访问者在访问“主页”时单击项目时，才加载显示在模式中的图像）

---

谢谢你的帮助

img

tag有
load
事件。例如，你可以控制他们
考虑你的图片有类<代码>。预加载图像< /代码>，我们为每个人创建一个标志。
要知道加载了哪个项目。我们将为每个类添加一个类，如
图像加载
，
图像加载完成后：

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

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