jqueryで特定のクラスのイメージをプリロードする

特定のクラスが適用されているイメージをプリロードすることはできますか？例えばjqueryで特定のクラスのイメージをプリロードする

- クラスを持つ画像のみをプリロード「.grid」

私は（私はDrupalの6を使用しています）配列に基づいてプリロードの例をたくさん見てきましたが、私のイメージ名が動的に生成され、そして私はイメージをグローバルにプリロードする必要はありません。

アイデア？おかげステファニー

2011-09-26 StephanieF

あなたが解決しようとしている問題をより速くgridクラスを持っているあなたのページに画像をロードすることであるならば、それをする方法はありません。ページ内でgridクラスの画像を見つけるには、DOMが読み込まれてからDOMを検索してその画像を見つけるまで待つ必要があります。あなたがそれをしている時点で、ブラウザはすでにそれらをロードしようとしています。その時点でJavascriptで行うことはできませんが、画像の読み込みを速くすることができます。ブラウザはすでにそれらを読み込んでいます。

私が知っている唯一のことは、読み込みたいURLの配列を作成して、JavaScriptの最初の部分（headタグ内のスクリプト）にプリロードすることができます。 "画像読み込みを少し速くする。しかし、これを行うには、これを適用するイメージを手動でリストアする必要があります。ページが読み込まれるのを待つことはできず、ページ内でそれらを探すことはできません。なぜなら、それらはすでにできるだけ速く読み込まれているからです。サーバー側のコードを制御する場合は、サーバー側のこのイメージのリストを生成し、その配列をJSに入れることができます。あなたはそれをした場合、それは次のようになります。

<head> 
<script type="text/javascript"> 
var preloadURLs = [ 
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg", 
    "http://photos.smugmug.com/photos/344290837_ypsKL-Ti.jpg" 
]; 

var preloadImgs = [], img; 
for (var i = 0; i < preloadURLs.length; i++) { 
    img = new Image(); 
    img.src = preloadURLs[i]; 
    preloadImgs.push(img); 
} 

</script> 
</head>

ほとんどのブラウザでは、これはページの読み込みが開始される前に、その要求が最初に起動されるので、多少これらの画像の読み込みを優先するのに役立つはずです。

出典

2011-09-26 19:46:23 jfriend00

説明をありがとう、私はjqueryが有効にする前に画像を読み込まなければならない接続を作っていませんでした。お手伝いありがとう。 – StephanieF

var imgs = new Array(); 
$('img.grid').each(function(idx){ 
var i = new Image(); 
i.src = $(this).attr('src'); 
imgs.push(i); 
});

出典

2011-09-26 19:29:52 usoban

これは役に立たないでしょう。イメージが '$（ 'img.grid'）で見つけられたページに既に存在する場合、それらはすでにブラウザによって読み込まれており、このプリロードコードは何も改善しません。 – jfriend00

だから、オプションは、画像をページに引っ張って、サイドまたは何かに隠すAjaxリクエストを使うことでしょうか？ –

jqueryで特定のクラスのイメージをプリロードする

答えて

関連する問題