根据预加载图像触发事件

Question

我真的需要一些关于如何根据预加载图像的过程触发事件的建议。 在我的网站上，我有很多大图像，其中大部分是display: none。为了避免图像闪烁，我已经阅读了这个POST，答案似乎是预加载给我的好方法。

但我想做的是在特定的预加载状态下触发事件。假设我有大约 40 张图片，并且我想在已经加载的每 10 张图片上触发一个事件，我该如何处理？

关于我的意图的一句话。我想创建自己的加载屏幕。一个小动画，其过程取决于预加载图像的过程。

类似：

first10picturesloaded(){ /* do something */ }
next10picturesloaded() { /* do something more */ }
...

提前致谢！

编辑：根据要求，这是 preload-sn-p

 function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
    $('<img/>')[0].src = this;
});
    }

    preload([
'img/about_1.gif',
'img/about_2.gif',
'img/contact_2.gif',
'img/contact.gif',
'img/digital_1.gif',
'img/digital_2.gif',
'img/dragged.gif',
'img/loading.gif',
'img/photo_1.gif',
'img/photo_2.gif',
'img/print_1.gif',
'img/print_2.gif',
'img/web_1.gif',
'img/web_2.gif',
'img/about.jpg']); //there are much more pictures in the array

Answer 1

未经测试

function preload(arrayOfImages, onLoadFunc) {
    $(arrayOfImages).each(function(val){
        $('<img/>').on("load", onLoadFunc).attr("src", val);
    });
}
var remaining = arrayOfImages.length;
preload(arrayOfImages, function(){
    remaining--;
    if (remaining % 10 == 0) {
        //progress
    } else if (remaining == 0) {
        //finished
    }
});

一个健壮的实现也会监听图像的error 和abort 事件。否则，一张图片加载失败将导致完成永远不会发生。