2

ページ上の画像の読み込み順序を変更するAJAXなしの方法はありますか？または、すでに存在する画像の読み込みを完全に停止または一時停止する方法もありますか？

ユースケースは単純です。ページの下に画像の長いリストがあり、訪問者はそれらの画像の実際のコンテナを参照するURLアンカー（/ images＃middle-of-page）を使用してページのさまざまな場所にアクセスします。

少なくとも、リクエストされたコンテナ内の画像を最初にロードしてから、残りの画像をロードし続けたいと思います。

課題は、ページDOMをロードする前に、要求されたコンテナイメージのイメージパスを知る方法がないことです。

ロード時にコンテナのimgコンテンツを取得してから、Javascriptの新しいImage（）テクニックを使用してみましたが、ページ上のその画像が以前のすべての画像のロードを待機しているという事実は変わりません。

また、ボディのdivの前に上記のimgパスの背景画像（CSS）をすぐに追加しようとしましたが、これも画像の読み込みを優先しません。

他のアイデアはありますか？

4

3 に答える 3

2

空のimgプレースホルダーを持つDOMが必要です。

<img src="" mysrc="[real image url here]" />

または、デフォルトで「読み込み中...」の画像を表示する画像を作成することもできます。たとえば、実際の画像のURLをカスタムタグにキャッシュすることもできますmysrc。次に、表示する画像を正確に（そしてどのような順序で）知ったら、一連の画像読み込みを構築する必要があります

var images = [];//array of images to show from start and in proper order
function step(i){
  var img = images[i++];
  img.onload = function(){
    step(i);
  }
  img.src = "[some url here]"
}

お役に立てれば。

于 2011-10-26T17:38:49.567 に答える
0

興味深いことに、これは私がここでの回答に基づいて実装することになった関数です（最適な速度のためにオンデマンドの読み込み関数にしました）：

function loadImage(img) { // NEED ALTERNATE METHOD FOR USERS w/o JAVASCRIPT! Otherwise, they won't see any images.

      //var img = new Image(); // Use only if constructing new <img> element

        var src = img.attr('alt'); // Find stored img path in 'alt' element

        if(src != 'loaded') {

          img

            .load(function() {
              $(this).css('visibility','visible').hide().fadeIn(200); // Hide image until loaded, then fade in
              $(this).parents('div:first').css('background','none'); // Remove background ajax spinner
              $(this).attr('alt', 'loaded'); // Skip this function next time
              // alert('Done loading!');
            })

            .error(function() {
              alert("Couldn't load image! Please contact an administrator.");
              $(this).parents('div:first').find("a").prepend("<p>We couldn't find the image, but you can try clicking here to view the image(s).</p>");
              $(this).parents('div:first').css('background','none');
            })

            .attr('src', src);
        }
    }
于 2011-11-07T15:37:03.903 に答える
0

このimg loading="lazy"属性は、これを実装するための優れた方法を提供します。

これを使用すると、ビューポート上にある場合にのみ画像が自動的に読み込まれます。ただし、JavaScriptで設定することにより、強制的にロードすることもできます。

document.getElementById('myimg').loading = 'eager';

完全に実行可能な例を次の場所で提供しました。ビューポートにある場合にのみ画像を遅延ロードするにはどうすればよいですか。

この方法の本当にすばらしい点の1つは、src=属性に通常どおり画像ソースが含まれているため、完全にSEOに対応していることです。参照：セマンティックマークアップを使用したレイジー画像の読み込み

于 2020-04-22T06:50:39.277 に答える