イメージプリローダースクリプトを見つけようとしています。
いくつか見つけましたが、プリロードが終了したときにトリガーされるイベントをサポートしているものはありません。
これを行うスクリプトまたはjQueryプラグインを知っている人はいますか?
この質問がstackoverflowに適していることを願っています-そうでない場合は、すぐに削除してください。
9761 次
4 に答える
35
配列から画像をプリロードし、最後の画像が終了したときにコールバックを呼び出す関数を次に示します。
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 promises を使用したバージョンは次のとおりです。
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
});
于 2011-11-25T06:03:22.183 に答える
2
より堅牢なソリューションとして、いくつかのコールバック ( jsFiddlePRELOADER )を使用したこの関数を検討してください。
シンプルに保つ：
この例では、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( );
} );
}; </p>
画像のプリローダーが必要なほどサイトの読み込みが大きい場合、モーダル テキスト表示を簡単に変更して、データ駆動型の jQuery アニメーションをサポートできます。
于 2012-10-14T23:13:56.477 に答える
0
プリロードとロードは同じことです。画像を挿入できますが (新しい画像を作成するか、既存の画像の "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();
});
}
于 2011-11-25T03:27:35.790 に答える
0
プリロードには、新しい画像要素の作成、それらがすべて読み込まれたかどうかの監視、DOM 内の既存のものとの置き換えなどの追加の作業が必要です。<img>ただし、DOM要素を置換せずに何度でも直接これを行うことができます。
Fetch API を使用して画像にアクセスしpromise.all()、.srcimgwindow.requestAnimationFrame()
次の例では、要素のsrc属性を10 回更新します。img遅延に従って、API から 4 つの画像を読み込むのにかかる時間を使用しています。refreshImagesNTimesしたがって、すべての画像が読み込まれたら、同じ関数を再帰的に呼び出して、すぐに新しいリクエストを送信します。
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>于 2017-09-10T09:24:58.400 に答える