Question

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

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

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

类似的东西：

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

提前致谢！

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

 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事件。否则，一个图像无法加载将导致完成永远不会发生。

火灾事件取决于预加载图像

1 个答案: