1

現在表示されている X 画像 (フルスクリーン スライドショー) の後に、次の X 画像を動的にプリロードしてキャッシュする必要があります。
これまでに見つけたすべての方法を試しましたが、ブラウザはまだキャッシュしていません。

注 #1 : 関係があるかどうかはわかりませんが、天気の良い日には、写真はそれぞれ少なくとも 2 Mb です。

画像をプリロードしてキャッシュする方法

方法#1 :

$('<img/>').attr({
    src: list[url]
}).load(function() {
    alert("I have preloaded your next image.");
});

方法#2 :

next_img = new Image()
next_img.src=list[url];
next_img.onload=function(){ alert("I have preloaded your next image."); }

方法#3 :

    $('<img/>')[0].src = list[url];

ブラウザ コンソールに表示されるのは、それらが実際に読み込まれたということです。これは、アラートによっても通知されます。

しかし、フルスクリーンで表示されている画像の「​​src」を変更するためのjQuery関数がある場合、コンソールは再びダウンロードされた写真を表示し、3〜4秒でわかるようにキャッシュについては言及しません上記のメソッドがロードしたばかりの画像のロード。

編集：

すべてのブラウザでキャッシュなしが発生しています。
すべての画像は MaxCDN から取得されます。

編集＃2：

ピア ロケーションの 1 つで問題が発生している可能性があります。

4

2 に答える 2

0

異なる z-index で画像を重ね合わせるとどうなりますか?

お気に入り：

.image_top {position:absolute; left:0px; top:0px; z-index:100;}
.image {position:absolute; left:0px; top:0px; z-index:0;}

表示される画像:

images[0].className  = "image_top";
于 2013-11-26T10:51:02.283 に答える
0

画像を div 要素の子としてリクエストしてロードし、表示されている画面領域からその div を絶対に配置します。

例えば：

JavaScript:
var arrImages = {}; 
var image = new Image();
var image.onload = function() {
    $('.imageContainerDiv').append(this);
    arrImages[this.src] = this;
}
image.src = imageURL;

Css:
.imageContainerDiv {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    top: -1024px;
    left: -1024px;
}

このようにして、次に arrImages から画像を参照するときに、ページに既に読み込まれているため、ブラウザーのキャッシュ/メモリから画像が取得されるはずです。

于 2013-04-08T11:29:18.777 に答える