如何使用 jquery 进行行预加载

Question

我尝试将此代码用于线路预加载器，但它没有用，我不知道问题出在哪里。

var $preload = $("<div class='preloader'><div class='percent'></div><div class='line-parent'><div class='line'></div></div></div>");
$("body").prepend($preload);

var $imgs = $("img");
var imgsLoaded = 0;
var ratio = 0;

$imgs.each(function(){
    $this = $(this);
    $this.load(function(){ 
        imgsLoaded++;
        ratio = imgsLoaded / $imgs.length;

        $(".percent").html(ratio / 0.01 + "%");

        $(".line").animate({
            width : ratio / 0.01 + "%"
        });
    }, function(){
        if(ratio === 1){
            $(".preloader").fadeOut();
        }
    });
});

Answer 1

我相信您想要 100% 显示所有图像都已加载并执行一些操作。如果在图像已加载后加载，则第一次加载事件将不起作用。

我建议每 100 毫秒（使用 setInterval）检查每个 img comlete 和 naturalWidth 属性。

Loader = (function() {
var list, img_length, loaded, interval;
function _check_one(i) { o = list[i]; if (o.complete == true && o.naturalWidth > 0) { loaded++; delete list[i]; } };
function _procent(l, a) { console.log((100*loaded/img_length) + '%'); }
function _check_list() { for(var i in list) {_check_one(i)};_procent();_kill(); };
function _kill() { if(img_length <= loaded) clearInterval(interval); }
function _start() { loaded = 0; list = $('img'); img_length = list.length; 
if(img_length != loaded) interval = setInterval(_check_list, 100); }
return { start: _start }
})();

现在在正文末尾或 $(document).ready(..) 中，您需要调用 Loader.start();

或者将所有图片源(src) 放在data-src 属性中，附加加载事件并将data-scr 复制到src 属性。在正文中，所有相关图片如下所示：

<img data-src="some url">...

在脚本标签中：

$('img').on('load', function() {
// Your action.
}).each(function() { var img = $(this); img.attr('src', img.attr('data-src')); });

如何使用 jquery 进行行预加载

How to do line preloader with jquery

javascript

jquery

preloader

line