Question

我正在尝试构建一个实际代表已加载内容“百分比”的预加载器。不一定是数字，而是使用动画框（从窗口的左到右缩放）。目前，我正在使用此代码来确定页面上有多少图像，并在加载所有图像时构建网格。

$(document).ready(function() {
num_images = $("img").length;
img_counter = 0;
$("img").css("display", "none");

$(".grid-item").each(function() {
    $(window).load(function() {
        img_counter++;
        if (img_counter == num_images) {
            console.log(num_images);
            $("img").css("display", "block");
            $('.grid').masonry({
                itemSelector: '.grid-item',
                isAnimated: true
            });
        }
    });
}); 
});

然后，在window.load上我有一个预加载器，它添加了一个“已加载”类。

$('.preloader').addClass('loaded');
setTimeout(function() {
    $('.content').css('opacity', 1);
    $('.preloader').css({'transform': 'translateY(-50px)'});
}, 500);

这一切都给人一种加载功能的错觉，但它实际上并没有显示“加载”过程。如何确定加载了多少内容并使用预加载器的宽度显示该内容？

这是我正在使用的基本测试页面。非常感谢提前！我不一定需要答案，而是指导或指导。

http://andyrichardson.design/masonry/

Answer 1

为图像添加onload函数，并在pnload函数trggers（意味着图像已加载）时增加计数器

$(document).ready(function() {
num_images = $("img").length;
   img_counter = 0;
  $('img').load(function(){
   img_counter++;
   // do your other stuff here
});
}

实际响应已加载内容的预加载器

1 个答案: