当前位置: 首页 > 面试题库 >

支持事件的图像预加载器JavaScript

朱阳晖
2023-03-14
问题内容

我正在尝试查找图像预加载器脚本。

虽然我发现了一些,但它们都不支持在预加载完成时触发的事件。

有谁知道会执行此操作的任何脚本或jQuery插件?

希望此问题适合stackoverflow-如果不行,请随时将其删除。


问题答案:

这是一个将从数组中预加载图像并在最后一个完成时调用回调的函数:

function preloadImages(srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.onload = function() {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];

preloadImages(imageSrcs, images, myFunction);

而且由于我们现在处于使用诺言进行异步操作的时代,因此以下是使用诺言并通过ES6标准诺言通知调用方的上述版本:

function preloadImages(srcs) {
    function loadImage(src) {
        return new Promise(function(resolve, reject) {
            var img = new Image();
            img.onload = function() {
                resolve(img);
            };
            img.onerror = img.onabort = function() {
                reject(src);
            };
            img.src = src;
        });
    }
    var promises = [];
    for (var i = 0; i < srcs.length; i++) {
        promises.push(loadImage(srcs[i]));
    }
    return Promise.all(promises);
}

preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {
    // all images are loaded now and in the array imgs
}, function(errImg) {
    // at least one image failed to load
});

而且,这是使用2015 jQuery Promise的版本:

function preloadImages(srcs) {
    function loadImage(src) {
        return new $.Deferred(function(def) {
            var img = new Image();
            img.onload = function() {
                def.resolve(img);
            };
            img.onerror = img.onabort = function() {
                def.reject(src);
            };
            img.src = src;
        }).promise();
    }
    var promises = [];
    for (var i = 0; i < srcs.length; i++) {
        promises.push(loadImage(srcs[i]));
    }
    return $.when.apply($, promises).then(function() {
        // return results as a simple array rather than as separate arguments
        return Array.prototype.slice.call(arguments);
    });
}

preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {
    // all images are loaded now and in the array imgs
}, function(errImg) {
    // at least one image failed to load
});


 类似资料:
  • 问题内容: 我有一个隐藏的联系表单,单击该按钮即可进行部署。它的字段设置为CSS背景图像,它们的出现时间总是比已切换的div晚一点。 我在本节中使用了此代码段,但运气不好(清除缓存后): 我正在使用jQuery作为我的库,如果我也可以使用它来解决此问题,那将很酷。 多谢您的光临。 问题答案: 我可以确认我的原始代码似乎有效。我随便坚持使用错误路径的图像。

  • 问题内容: 我正在寻找一种快速简单的方法来用JavaScript预加载图像。如果重要的话,我正在使用jQuery。 但是,对于我想要的东西来说似乎有点过高了! 我知道那里有执行此操作的jQuery插件,但它们看上去都很大(大小);我只需要一种快速,轻松和简短的方式来预加载图像! 问题答案: 快速和简单的: 或者,如果您想要一个jQuery插件:

  • 问题内容: 我在下面编写的功能是否足以在当今大多数(如果不是全部)浏览器中预加载图像? 我有一个图像URL数组,可以循环访问这些URL,并为每个URL 调用该函数。 问题答案: 是。这应该适用于所有主要的浏览器。

  • 问题内容: 我有看起来像的图片。加载单个图像时,我需要应用iScroll refresh()方法以使图像可滚动。 知道何时完全加载映像以运行某些回调的最佳方法是什么? 问题答案: 这是一个如何调用图像加载的示例http://jsfiddle.net/2CsfZ/2/ 基本思想是创建一个指令并将其作为属性添加到img标签。 JS: HTML:

  • 问题内容: 在同构渲染页面中,可以在下载主文件之前下载图像。因此,可以在注册事件之前加载图像-切勿触发此事件。 方案1- 大于 在这种情况下,一切正常。在图像最终加载之前注册了事件,因此控制台中显示消息。 方案2- 小于 这种情况下,您可以在文章开头看到问题。事件未触发。 题 在 方案2中 触发事件该怎么办? 编辑:苏联答案实现 要检测渲染是否准备好图像,您应该检查纯javascript 对象的属

  • 我正在使用webpack管理reactjs项目。我想通过webpack