画像プリフェッチ
6627 ワード
CSS Spritesなどの様々なCSS手段を用いてページインタラクション時のピクチャロード遅延の問題を回避することができるが、JSスクリプトの手段を用いてピクチャプリフェッチを実現する必要がある場合もある.
以下はjQueryに基づいて画像の前読みを実現する方法です(jQueryでは便宜上、オリジナルjsや他のクラスライブラリを使用することもできます).以下のコードはjsファイルまたはブロックに入れてください(jQueryクラスライブラリがロードされていることを保証してください):
以下はjQueryに基づいて画像の前読みを実現する方法です(jQueryでは便宜上、オリジナルjsや他のクラスライブラリを使用することもできます).以下のコードはjsファイルまたは
function imagePreload(images){ var arr = ['<div style="display:none;">']; $.each(images, function(i, data){ arr.push('<img src="'+ data +'" />'); }); arr.push('</div>'); $('body').append(arr.join('')); }var preloadImages = [], preloadDir = './img/'; //preloadDir为图片文件所在的路径 preloadImages.push(preloadDir + 'a.jpg'); //这里的每一行添加一张图片，请自行修改图片文件名 preloadImages.push(preloadDir + 'b.jpg'); preloadImages.push(preloadDir + 'c.jpg'); imagePreload(preloadImages); //调用之前写的preload方法function imagePreload(images){ var arr = [], elm = document.createElement('div'); for(var i=0; i<images.length; i++){ arr.push('<img src="'+ images[i] +'" />'); } elm.style.display ='none'; elm.innerHTML = arr.join(''); document.body.appendChild(elm); }