1

ブラウザで画像のプリロードがどのように機能するかを理解する必要があります。このコードがあるとしましょう：

<script type="text/javascript" language="JavaScript">
    companyLogo = new Image();
    companyLogo.src = "/images/image1.jpg"
</script>

それから私のページの下のどこかに私はフォローしています。

<img src= "/images/image1.jpg" />

ご覧のとおり、最初に画像 / images/image1.jpg をプリロードしてから、画像タグ内で使用しています。

私のウェブサイトには非常に高解像度の製品画像があり、メイン画像の読み込み中にページ全体がハングすることがあります。画像のサイズが大きいことは気にしません。やりたいことは....コンテンツやその他の要素を含むページをロードし続け、ロードされるとすぐに画像を表示します（ただし、画像のためだけにページをハング/一時停止しないでください）まだロードされていません)。

さて、上記のアプローチは、正確には何をしますか? 画像をキャッシュにプリロードし、ページを待機してハングしますか? またはそれは私がやろうとしていることを正確に行いますか?

ありがとう

4

3 に答える 3

4

代わりに画像を最適化する必要があるように聞こえますが、私がどのように行うかをお見せできることをうれしく思います.

画像の src を含めず、data に隠します。(正しい幅と高さを使用して、ページが最終的に読み込まれたときにジャンプしないようにします。)

<img src="1px.gif" data-src="http://the.real.src" class="justyouwait" style="width:10000000px; height:1000000px;" />

次に、dom の準備ができたら、つまり、ページが読み込まれたら、それらを読み込みます

$(function(){
    $('img.justyouwait').each(function(){
        $(this).attr('src', $(this).data('src'));
    });
});

または少しの優しさを加える

$('img.justyouwait').each(function(){
    $(this).css({opacity:0}).load(function(){
        $(this).animate({opacity:1},1000); // fade them in
    }).attr('src', $(this).data('src'));
});
于 2013-01-17T23:21:46.607 に答える
2

私はDOMReadyでそれを行います。ただし、基本的には、ページの読み込みと同時にファイルの読み込みを試みます。ハングすることはありません。ただし、画像を「遅延」ロードすることはありません。通常、この手法は、必要になる可能性のある画像をロードするために使用されます。最初に HTML で低解像度を読み込み、高解像度画像の準備ができたら JavaScript を介して画像を更新します。または、Web セーフ イメージを読み込んで、必要に応じて高解像度へのリンクをユーザーに提供することもできます。

人々に高解像度の画像をダウンロードさせるのは悪い考えです。これは、人々にあなたのサイトを避けさせる良い方法です.

編集：

したがって、次のようなことができます。

<img src="src/to/placeholder.jpg" data-path="path/to/high/res.jpg" class="lazyload"/>

次に、JavaScript 関数を実行します。

$('.lazyload').each(function(){
    $(this).attr('src',$(this).data('path'));
});

私のコードが正確かどうかはわかりませんが、要点はわかります。

編集: DOM の読み込み中は、基本的にすべての製品画像に対して同じプレースホルダー画像を読み込みます。バックグラウンドで、javascript は data-path のパスに基づいて実際の画像を要求します。次に、画像の読み込みが完了すると、プレースホルダー ソースがより適切な画像で更新されます。必要に応じて、フェードなどを追加します。

于 2013-01-17T23:19:36.547 に答える
0

これを支援するために、この単純な jQuery プラグインを作成しました。

imgur.js

/*
    Plugin: IMGUR
    Author: Drew Dahlman ( www.drewdahlman.com )
    Version: 0.0.2
*/

    (function($) {

        $.fn.imgur = function(options,loaded) {
            var defaults = {
                img: '',
            }

            if(loaded){
                var callback = {
                    loaded: loaded
                }
            }

            return this.each(function() {

                var settings = $.extend(defaults,options);
                var callbacks = $.extend(callback,loaded);
                var _image;

                var $this = $(this);

                function init(){
                    if(callbacks.loaded != null){
                        _image = new Image();
                        _image.onLoad = loaded();
                        _image.src = settings.img;
                    }
                }
                function loaded(){
                    if(callbacks.loaded != null){
                        callbacks.loaded($this,settings.img);
                    }
                }
                init();
        });
        };

    })(jQuery);

使い方

ロードする画像が複数ある場合は、html でクラスを割り当てます。

<img src='' data-image='images/image1.jpg' class='preload'/>

次に、JavaScript呼び出しで（これは jQuery を使用していると仮定します）

<script>
$(".preload").each(function(){
 var $this = $(this);
 $this.imgur({
  img: $this.data('image') // in your case
 },function(el,data){
   el.attr('src',data);
 });
});
</script>

これは data-image を使用して画像をロードし、ロードされると、そのデータを提供した要素に追加します。

乾杯！

于 2013-01-17T23:45:06.753 に答える