我正在尝试查找图像预加载器脚本。
虽然我发现了一些，但它们都不支持在预加载完成时触发的事件。
有谁知道可以执行此操作的任何脚本或 jQuery 插件？
希望这个问题适用于 stackoverflow - 如果不是，请随时将其删除。
支持事件的图像预加载器 javascript
IT技术
javascript
jquery
image
preloader
preloading
2021-01-19 00:04:20
4个回答
这是一个函数，它将从数组中预加载图像并在最后一个完成后调用您的回调：
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);
由于我们现在正处于使用 Promise 进行异步操作的时代，这里有一个上面的版本，它使用 Promise 并通过 ES6 标准Promise通知调用者：
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
});
要获得更强大的解决方案，请考虑此PRELOADER函数与几个回调 ( jsFiddle )。
保持简单：
在这个例子中，我在一个Object字面量中传递回调和一个图像哈希PRELOADER_OBJECT，然后覆盖里面的回调PRELOADER：
// preloder object stores image hash
// and event handler callbacks
var PRELOADER_OBJECT = {
imgArray:"http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg".split(" "),
progressCallback : function( percent )
{
$( '#preloader_progress' ).html( 'preload progress complete : ' + percent + '%' );
console.log( 'preload progress complete : ', percent );
},
completeCallback : function( scope )
{
// hide preload indicator, do something when finished
console.log( 'preload complete!' );
$( '#preloader_modal' ).delay( 1000 ).animate( { opacity : 0 }, function( )
{
$( '.preload_class' ).each( function( index )
{
$( this ).delay( index * 100 ).animate( { opacity : 0 } );
} );
} );
}
/*Localize params and create PRELOADER object.
Needs to loadImages( ); iterate through hash and
call onPreloadProgress( ) and onPreloadComplete( )
each time until finished. If you're still within
bounds of the image hash, call progressCallback( )
recursively. When finished, fire onCompleteCallback( )*/
var PRELOADER = function( object )
{
// preloader modal overlay
this.modal = undefined;
// progress indicator container
this.progressIndicator = undefined;
// image preload progress
this.progress = undefined;
// progress callback
this.progressCallback = undefined;
// complete callback
this.completeCallback = undefined;
// hash to store key : value pairs for image paths
this.imgArray = undefined;
// store images in preloadArray
this.preloadArray = [];
// initialize and localize our data
this.initialize = function( )
{
// create preload indicator and overlay modal
this.createPreloaderModal( );
// image hash
this.imgArray = object.imgArray;
// progress callback event handler
this.progressCallback = object.progressCallback;
// complete callback event
this.completeCallback = object.completeCallback;
// load images
this.loadImages( );
};
this.progressCallback = function( ) {}; // function to override
this.completeCallback = function( ) {}; // function to override
// load images into DOM and fire callbacks
this.loadImages = function( )
{
var that = this;
// iterate through hash and place images into DOM
$.each( PRELOADER_OBJECT.imgArray, function( index, object )
{
this.image = $( "<img/>", { "src" : object, "class": "preload_class" } ).appendTo( 'body' );
// mark progress and call progressCallback( ) event handler
that.progress = Math.ceil( ( index / PRELOADER_OBJECT.imgArray.length ) * 100 );
that.progressCallback( this.progress );
that.preloadArray.push( this.image );
} );
// check for array bounds and call completeCallback( )
if ( PRELOADER_OBJECT.imgArray.length )
{
this.progressCallback( 100 );
this.completeCallback( this );
}
};
// create modal to display preload data
this.createPreloaderModal = function( )
{
this.modal = $( '<div/>', { 'id' : 'preloader_modal' } ).appendTo( 'body' );
this.progressIndicator = $( '<h1/>', { 'id' : 'preloader_progress' } ).appendTo( this.modal );
};
};
// trigger event chain when DOM loads
$( document ).ready( function( )
{
// instantiate PRELOADER instance and pass
// our JSON data model as a parameter
var preloader = new PRELOADER( PRELOADER_OBJECT );
// initialize preloader
preloader.initialize( );
} );
};
当站点负载大到需要图像预加载器时，可以轻松修改模式文本显示以支持数据驱动的 jQuery 动画。
预加载和加载是一回事。您可以插入图像（创建一个新图像或更改现有图像的“src”属性），但使用$("element").hide()或类似的方法隐藏元素。在执行此操作之前，请附加一个加载事件处理程序，如下所示：
var images = ["src1", "src2", "src3", "src4"];
var len = images.length;
for(i=0; i<len; i++){
$("parent element").html('<img id="new-img" style="display:none;" src="'+images[i]+'"/>');
$("new-img").load(function(){
//Your image is now "preloaded"
//Now you can show the image, or do other stuff
$(this).show();
});
}
预加载需要一些额外的工作，比如创建新的图像元素，监控它们是否全部加载，然后用 DOM 中的现有元素替换它们。但是，您可以<img>无限次地直接在 DOM元素上执行此操作而不替换它们。
我们可以使用提取API来访问图像，等到他们都内的下载promise.all()，然后在一个去只需更换src的属性img通过元素在最合适的时间window.requestAnimationFrame()。
在下面的示例中，我刷新src了img元素的属性10 次。根据延迟，我正在使用从 API 加载 4 个图像所需的时间。因此，一旦我们加载了所有图像，我就会立即通过refreshImagesNTimes递归调用相同的函数来发出新请求。
您当然可以选择一次加载任意数量的图像 blob，并使用简单的setTimeout机制以精确的时间间隔成组显示它们。
function refreshImagesNTimes(nodeList,count = -1){
var imgPromises = Array.from({length: nodeList.length})
.map(_ => fetch("https://unsplash.it/480/640/?random").then(res => res.blob()));
Promise.all(imgPromises)
.then(function(blobs){
window.requestAnimationFrame(_ => nodeList.forEach((img, i) => img.src = (window.URL || window.webkitURL).createObjectURL(blobs[i])));
--count && refreshImagesNTimes(nodeList, count);
});
}
var images = document.querySelectorAll("#container img");
refreshImagesNTimes(images,10);#container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
margin: auto;
width: 75vw;
height: 56.25vw;
background-color: #000;
box-sizing: border-box;
}
img {
width: 45%;
height: 45%;
background-color: thistle;
}<div id="container">
<img>
<img>
<img>
<img>
</div>其它你可能感兴趣的问题