如何编码加载特定图像后消失的加载屏幕?

时间:2014-09-07 03:56:51

标签: javascript image responsive-design loading parallax

我有一个视差单页滚动,响应式投资组合,有许多不同的项目。 如果访问者点击项目,每个项目都会激活一个最多包含15个图像的模态。

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

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

由于图片众多,目前需要30秒到1分钟才能访问投资组合

有人知道如何:   - 首先加载一些图像(主页的背景,每个项目的缩略图等)   - 仅在加载这些图像时才将加载屏幕保留在开头   - 加载这些图像时加载开始屏幕消失,以便访问者可以开始浏览投资组合,因此不必等待30秒   - 当他浏览页面时继续加载其他图像(所以现在加载仅当访问者在访问" main"页面时点击项目时出现在模态内的图像)

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

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