Javascript 如何使用jquery进行行预加载

我为一个行预加载程序尝试了这段代码，但它不起作用，我不知道问题出在哪里

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

var$preload=$（“”）；
$（“主体”）。预加载（$预加载）；
var$imgs=$（“img”）；
var imgsload=0；
var比率=0；
$imgs.每个（函数（）{
$this=$（this）；
$this.load（函数（）{
imgsLoaded++；
比率=imgsLoaded/$imgs.length；
$（“.percent”）.html（比率/0.01+“%”）；
$（“.line”）.animate({
宽度：比率/0.01+“%”
});
}，函数（）{
如果（比率==1）{
$（“.preload”）.fadeOut（）；
}
});
});

我相信您希望100%显示所有图像已加载并执行一些操作。如果在映像已加载后尝试，则第一个加载事件将不起作用

我建议每100ms检查一次img comlete和naturalWidth属性（设置间隔）

---

请定义1）“行预加载程序”2“不工作”。应该发生什么？发生了什么事？您看到了什么错误？第一行代码中定义了行和预加载程序。。。预加载程序保持在100%并且不会消失，它甚至不会像console.log（$imgs.length）show@JaromandaX很抱歉，我没有要求您在代码中定义它。我想让你告诉我们什么是“线路预载器”。在这里，我假设它是某种排序或进度条。我尝试了您的第一个代码，但它在控制台中只给出100%的检查结果。这里只有完整的状态，您可以添加检查naturalWidth属性列：函数_check_one（）{if（this.complete==true&&this.naturalWidth>0）loaded++；我对第一个代码做了一些编辑，效果很好：D非常感谢@tkeramUps:D这是我的第一个问题，所以我不知道这里的习惯：D完成了！再次感谢

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

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

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