jQueryで画像をプリロードする

JavaScriptで画像をプリロードするための迅速で簡単な方法を探しています。それが重要な場合は、jQueryを使用しています。

私はこれをここで見ました（http：//nettuts.com ...）：

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

しかし、それは私が欲しいものに対して少しオーバーザックに見えます！

これを行うjQueryプラグインが世の中にあることは知っていますが、それらはすべて（サイズが）少し大きいようです。画像をプリロードするための迅速、簡単、かつ短い方法が必要です！

クイックと簡単に：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[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(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

以下は、実際に画像をDOMにロードしてデフォルトで非表示にする最初の応答の微調整バージョンです。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

JavaScript 画像オブジェクトを使用します。

この関数を使用すると、すべての画像のロード時にコールバックをトリガーできます。ただし、少なくとも1つのリソースがロードされていない場合、コールバックはトリガーされないことに注意してください。これは、onerrorコールバックを実装してloaded値をインクリメントするか、エラーを処理することで簡単に修正できます。

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

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 < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').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呼び出しで画像をプリロードするためのソリューションを探すのに役立ちます。

次の1行のjQueryコードは、DOM要素imgを表示せずに作成（およびロード）します。

$('<img src="img/1.jpg"/>');

$.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/

これを処理する小さなプラグインがあります。

これは、waitForImagesと呼ばimgれ、CSS内の画像への参照を持つ要素または任意の要素を処理できdiv { background: url(img.png) }ます。

CSSで参照されているものを含むすべての画像を単にロードしたい場合は、次のようにします:)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

あなたはcss display:none;ルールを使用してhtmlのどこかに画像をロードし、jsまたはjqueryで必要なときにそれらを表示することができます

プリロードにjsまたはjquery関数を使用しないでくださいcssルール対実行されるjsの多くの行

例：HTML

<img src="someimg.png" class="hide" alt=""/>

CSS：

.hide{
display:none;
}

jQuery：

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

jquery / javascriptによる画像のプリロードは適切ではありません。画像がページに読み込まれるまでに数ミリ秒かかります。スクリプトが解析および実行されるまでに数ミリ秒かかるため、特に大きな画像の場合、hmlで非表示にするとパフォーマンスも向上します。原因の画像は、あなたがそれを示すまで、まったく表示されることなく実際にプリロードされます！

この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
    }
});

画像を同期または非同期のどちらでロードするか、および個々の画像ごとに完全なイベントをロードするかどうかなど、他のオプションもあります。

プラグインを使わずにjQueryに画像をプリロードしてコールバック関数を取得する簡単な方法はimg、一度に複数のタグを作成し、応答をカウントすることです。

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).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 '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

これをありがとう！私は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という名前でした。親指を大きくすると、_th.jpgが_lg.jpgに置き換えられ、すべての大きな画像がプリロードされます。

これが誰かを助けることを願っています。

    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*/
        }
    )

次のコードを使用します。

$("#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";

マニフェストファイルを使用して、（最新の）Webブラウザーに、関連するすべての画像を読み込んでキャッシュするように指示します。Gruntとgrunt-manifestを使用してこれを自動的に実行し、プリロードスクリプト、キャッシュ無効化プログラム、CDNなどを心配する必要はありません。

https://github.com/gunta/grunt-manifest

これはIE9でも機能します。

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Google Maps APIのカスタムオーバーレイでこれを実現したいと考えていました。彼らのサンプルコードは単にJSを使用してIMG要素を挿入し、画像が読み込まれるまで画像プレースホルダーボックスが表示されます。私はここで私のために働いた答えを見つけました：https : //stackoverflow.com/a/10863680/2095698。

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

これは前に提案されたように画像をプリロードし、img URLがロードされた後、ハンドラーを使用してimgオブジェクトを追加します。jQueryのドキュメントでは、キャッシュされた画像はこのイベント/ハンドラコードでは適切に機能しないと警告していますが、FireFoxとChromeでは問題なく機能し、IEについて心配する必要はありません。

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

.attr('src',value) ない .attr('src',this)

指摘するだけです:)

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

actionscriptを少し知っている人は、最小限の労力でフラッシュプレーヤーをチェックし、フラッシュプリローダーを作成して、html5 / Javascript / Jqueryにエクスポートすることもできます。フラッシュプレーヤーが検出されない場合に使用するには、html5プレーヤーに戻るyoutubeの役割でこれを行う方法の例を確認します。そして、独自のプレーヤーを作成します。詳細はわかりません。まだ開始していないため、忘れていない場合は後で投稿し、標準のJqueryコードを試してみます。