0

私のウェブサイトにはサムネイル画像が表示されます。ユーザーが画像をクリックすると、画像が大きなサイズで表示されます。画像自体には、高速レンダリング用のサムネイル サイズと、より大きなサイズの 2 つのサイズがあります。

最初にサムネイル サイズがダウンロードされ、表示されます。私が欲しいのは、ページがレンダリング/ロードされたら、より大きな画像をダウンロードすることです(ただし、非表示にします)。そうすれば、最初のレンダリングは高速ですが、ユーザーがサムネイルをクリックすると、画像は既にダウンロードされています。

最初に私はこれをしました

<div name = "big_path" style= "display:hidden" src == "" path = "big/path"></div>

js/jquery では、読み込み後に src 属性をパスに設定して、画像をダウンロードします。この div 要素は、画像のダウンロード以外には使用しません。

これは IE では機能しますが、Chrome は非表示の画像をダウンロードしません。したがって、ユーザーがサムネイルをクリックすると、最初に画像がダウンロードされます。これで十分速いかもしれませんが、既にイメージをダウンロードしておくことをお勧めします。

何をすべきか？

4

2 に答える 2

0

私がやったことは、divを見えるようにすることでしたが、1px x 1pxにしました。そして、divではなくスパンにしました：

<span name = "big_path" style = "width:1px; height:1px" src == "" path = "big/path"></span>

そして、最初のレンダリングが完了したら、引き続き src = path を設定します。

于 2013-01-06T11:15:16.767 に答える
0

次のようなことをしたいかもしれません:

$(document).ready(function(){
    //load images
    //append images
});

基本的に、ドキュメントが読み込まれた後に大きな画像を読み込みます。その後、次のように画像を追加します。

$('.thumbnail').append('<img src="img/lol.jpeg" />');

多くのサムネイルのために、これを for ループに入れたいと思うかもしれません。

別の解決策は、プログレッシブ jpegを使用することです。

于 2013-01-06T11:29:42.253 に答える