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

Preloader That Actually Responds To Loaded Content

本文关键字：加载 响应      更新时间：2023-09-26

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

$(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/

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

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