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階

この問題に対処するための小さなプラグインがあります。

という waitForImagesimg要素または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を表示せずに作成(およびロード)します。

$(' ')