jQueryで画像をプリロードする
Preload Images With Jquery
すばやく簡単に使用できる方法を探しています JavaScript 画像をプリロードします。それが重要な場合、私は使用しています jQuery 。
私はここにいます( http://nettuts.com..。 ) 鋸:
function complexLoad(config, fileNames) { for (var x = 0 x ').attr({ id: fileNames[x], src: config.imgDir + fileNames[x] + config.imgFormat, title: 'The ' + fileNames[x] + ' nebula' }).appendTo('#' + config.imgContainer).css({ display: 'none' }) } }
しかし、それは私が望むものには少し高すぎるようです!
これを行うためのjQueryプラグインがあることは知っていますが、それらはすべて大きい(サイズ)ようです。画像をプリロードするための迅速、簡単、短い方法が必要です。
#1階
css display:none
画像をhtmlのどこかにロードdisplay:none
を使用できますルールを作成し、jsまたはjqueryを使用する必要があるときに表示します
CSSルールだけをプリロードするためにjsまたはjquery関数を使用しないでください。実行するjs行が多数あります。
例:HTML
CSS:
.hide{ display:none }
jQuery:
//if want to show img $('.hide').show() //if want to hide $('.hide').hide()
jquery / javascriptを介した画像のプリロードは、画像がページに読み込まれるまでに数ミリ秒かかるため、うまく機能しません+特に大きな画像の場合は、スクリプトを解析して実行するのに数ミリ秒かかります。 hmlでのパフォーマンス。表示するまで、ビープ音をまったく鳴らさずに画像をプリロードします。
#2階
function preload(imgs) { $(imgs).each(function(index, value) { $(' ').attr('src', value).appendTo('body').css('display', 'none') }) }
.attr('src',value)
ない.attr('src',this)
ただそれを指摘してください:)
#3階
jQueryに画像をプリロードしてコールバック関数を取得するための高速でプラグイン不要の方法は、一度に複数を作成することですimg
ラベルを付けて、応答を計算します。たとえば、
function preload(files, cb) { var len = files.length $(files.map(function(f) { return ' ' }).join('')).load(function () { if(--len===0) { cb() } }) } preload(['one.jpg', 'two.png', 'three.png'], function() { /* Code here is called once all files are loaded. */ })
IE7をサポートする場合は、このあまり美しくないバージョン(他のブラウザーでも使用可能)を使用する必要があることに注意してください。
function preload(files, cb) { var len = files.length $($.map(files, function(f) { return ' ' }).join('')).load(function () { if(--len===0) { cb() } }) }
#4階
JavaScriptを使用する 画像オブジェクト 。
この機能を使用すると、すべての画像が読み込まれたときにコールバックをトリガーできます。ただし、少なくとも1つのリソースがロードされていない場合、コールバックがトリガーされることはないことに注意してください。これは、onerror
コールバックと増加loaded
値または処理エラーによって簡単に解決できます。
var preloadPictures = function(pictureUrls, callback) { var i, j, loaded = 0 for (i = 0, j = pictureUrls.length i
#5階
IE9でも、これは私にとってはうまくいきます。
$(' ').on('load', function(){ doOnLoadStuff() })
#6階
jQuery.preloadImage=function(src,onSuccess,onError) { var img = new Image() img.src=src var error=false img.onerror=function(){ error=true if(onError)onError.call(img) } if(error==false) setTimeout(function(){ if(img.height>0&&img.width>0){ if(onSuccess)onSuccess.call(img) return img } else { setTimeout(arguments.callee,5) } },0) return img } jQuery.preloadImages=function(arrayOfImages){ jQuery.each(arrayOfImages,function(){ jQuery.preloadImage(this) }) } // example jQuery.preloadImage( 'img/someimage.jpg', function(){ /*complete this.width!=0 == true */ }, function(){ /*error*/ } )
#7階
$.fn.preload = function (callback) { var length = this.length var iterator = 0 return this.each(function () { var self = this var tmp = new Image() if (callback) tmp.onload = function () { callback.call(self, 100 * ++iterator / length, iterator === length) } tmp.src = this.src }) }
使い方は簡単です:
$('img').preload(function(perc, done) { console.log(this, perc, done) })
http://jsfiddle.net/yckart/ACbTK/
#8階
私は次のコードを使用します:
$('#myImage').attr('src','img/spinner.gif') var img = new Image() $(img).load(function() { $('#myImage').attr('src',img.src) }) img.src = 'http://example.com/imageToPreload.jpg'
#9階
Google Maps APIを使用してオーバーレイをカスタマイズすることで、これを実現したいと思います。彼らのサンプルコードは、JSを使用してIMG要素を挿入し、画像が読み込まれるまで画像プレースホルダーボックスを表示するだけです。ここで見つけました できます sの答え: https : //stackoverflow.com/a/10863680/2095698 。
$(' ').load(function() { $(this).width(some).height(some).appendTo('#some_target') })
前に提案したように、これは画像をプリロードし、img URLをロードした後、ハンドラーを使用してimgオブジェクトをアタッチします。 jQueryのドキュメントでは、キャッシュされた画像はこのイベント/ハンドラーコードではうまく機能しないと警告されていますが、FireFoxとChromeでは機能するので、IEについて心配する必要はありません。
#10階
Coffeescriptの5行
array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png'] $(document).ready -> for index, image of array img[index] = new Image() img[index].src = image
#11階
マニフェストファイルを使用して、(最新の)Webブラウザーに、関連するすべての画像をロードしてキャッシュするように指示します。 Gruntとgrunt-manifestを使用して、スクリプトのプリロード、キャッシュ無効化、CDNなどを気にせずにこの操作を自動化します。
https://github.com/gunta/grunt-manifest
#12階
アクションスクリプトを少ししか知らない人は、Flash Playerを簡単にチェックしてFlashプリローダーを作成するか、html5 / Javascript / Jqueryにエクスポートすることができます。 Flash Playerを検出せずに使用するには、YouTubeキャラクターを介してhtml5プレーヤーに戻ってこれを行う方法の例を参照してください:)次に、独自のFlashPlayerを作成します。まだ始めていないので、詳しい情報はありません。忘れていない場合は、後で投稿し、標準のJqueryコードを試してみます。
#13階
JPさん、解決策を確認した後も、Firefoxで、ページの読み込みを続行する前に画像をプリロードできないという問題があります。サーバーサイドスクリプトを追加することでこれを行いましたsleep(5)
これを発見するために。状況に応じて以下の解決策を実施しましたが、この問題は解決できるようです。
基本的に、jQueryプリロードプラグインにコールバックを追加して、すべての画像が正しくロードされた後に呼び出されるようにしました。
// Helper function, used below. // Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg') Array.prototype.remove = function(element) { for (var i = 0 i ').attr({ src: this }).load(function() { checklist.remove($(this).attr('src')) if (checklist.length == 0) { callback() } }) }) }
私の文脈では、興味をそそるので、私はそれを次のように使用します:
$.post('/submit_stuff', { id: 123 }, function(response) { $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){ // Update page with response data }) })
これがGoogleからこのページにアクセスする人々(私のように)がAjax呼び出しで画像をプリロードするための解決策を見つけるのに役立つことを願っています。
#14F
速い シンプル:
function preload(arrayOfImages) { $(arrayOfImages).each(function(){ $(' ')[0].src = this // Alternatively you could use: // (new Image()).src = this }) } // Usage: preload([ 'img/imageName.jpg', 'img/anotherOne.jpg', 'img/blahblahblah.jpg' ])
または、jQueryプラグインが必要な場合:
$.fn.preload = function() { this.each(function(){ $(' ')[0].src = this }) } // Usage: $(['img1.jpg','img2.jpg','img3.jpg']).preload()
#15F
このjquery imageLoader プラグインはわずか1.39kbです
使用法:
$({}).imageLoader({ images: [src1,src2,src3...], allcomplete:function(e,ui){ //images are ready here //your code - site.fadeIn() or something like that } })
イメージを同期的にロードするか非同期的にロードするか、各イメージの完全なイベントなど、他のオプションがあります。
#16階
この問題に対処するための小さなプラグインがあります。
という waitForImages 、img
要素またはCSSの画像を参照する任意の要素を処理できます。たとえばdiv { background: url(img.png) }
。
ロードしたいだけなら すべて CSSで参照されているものを含む画像は、次の手順に従ってください:)
$('body').waitForImages({ waitForAll: true, finished: function() { // All images have loaded. } })
#17階
ありがとうございました! JPの答えにちょっとした即興を加えたいと思います-それが誰にも役立たないかどうかはわかりませんが、このように、画像配列を作成する必要はなく、名前を付けるためにすべての大きな画像をプリロードできます正しく親指。これは、すべてのページをhtmlで作成する人がいるので便利です。これにより、1つの手順を実行する必要がなくなり、画像配列を作成する必要がなくなり、別の手順で混乱する可能性があります。
$('img').each(function(){ var imgsrc = $(this).attr('src') if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){ imgsrc = thumbToLarge(imgsrc) (new Image()).src = imgsrc } })
基本的に、ページ上のすべての画像は各画像のsrcを取得し、特定の条件を満たす場合(サム画像またはホームページ画像)、名前を変更し(画像srcの基本的な文字列置換)、次に画像。
私の場合、ページは親指の画像でいっぱいで、すべての画像の名前はimage_th.jpgで、対応するすべての大きな画像の名前はimage_lg.jpgです。 Thumbは_th.jpgを_lg.jpgに置き換えてから、すべての大きな画像をプリロードします。
これが誰かを助けることを願っています。
#18階
これは、実際に画像をDOMにロードし、デフォルトで非表示にする最初の応答の調整済みバージョンです。
function preload(arrayOfImages) { $(arrayOfImages).each(function () { $(' ').attr('src',this).appendTo('body').css('display','none') }) }
#19F
このjQueryコードは、DOM要素imgを表示せずに作成(およびロード)します。
$(' ')