画像のレイジーローディング（graceful degradation）（JavaScript）

Question

それぞれ独自のコンテンツを持つ複数のタグを含むHTMLページを考えてみましょう。私はJavaScriptで動くスライドショーで各タグをスライドに変換したいと思っています。それぞれのタグは画像を含むことができ、このスライドショーには遅延読み込みが必要です。私は一度にすべての画像をロードしたくありません。

一方、JavaScriptを有効にしていないユーザーや検索エンジンでは、マークアップとすべての画像が表示されます。 JavaScriptが有効になっているときに画像が読み込まれないようにするにはどうしたらいいですか？JavaScriptが有効になっていないときに画像が読み込まれるようにするにはどうすればよいですか？

一つの方法は、この形式ですべての画像を置き換えるために、次のようになります。

<img src="" data-src="myimage.png"> 

その解決策の問題は何も優雅な劣化はありませんです。

代わりに、私がしなければならない。

<img src="myimage.png"> 

ことの問題点は、HTMLページ内のすべてのイメージのロードからブラウザを防ぐことができないということです。ドキュメントの準備ができたら、いくつかの方法でHTMLを修正しようとしました。たとえば、imageのすべてのsrc属性をdata-srcに置き換え、本文全体を空にするなどです。

私は本当に優雅な劣化を犠牲にしなければなりませんか？

ありがとうございます。

Answer 1

最も簡単な方法は、<noscript>タグで囲まれた画像タグとそのsrc属性を使用して複製することです。その上または下には、カスタムのdata-src属性を持つ同じタグを検出し、Javascriptで遅延ロードすることができます。

Answer 2

あなたは両方のバージョンを含めることができます：あなたのJavaScriptコードが同期してそれらを保つことができるように

<img src="" data-src="myimage.png"> 
<noscript> 
    <img src="myimage.png"> 
</noscript> 

が別々の<img>タグを関連付けるために良いでしょう。たとえば：;もちろんの

<img src="" class='lazy' data-master="myimage"> 
<noscript> 
    <img id="myimage" class='super-sized interesting' src="myimage.png"> 
</noscript> 

次に、あなたのJSコードを使用すると、手動で二つのバージョン更新（jQueryの例をご容赦を維持する必要がないように、「Scriptyの」イメージは、クラスなどを拾うことを確認することができますあなたはこれをしたいと思いますが）：

$('img.lazy').each(function() { 
    var $lazy = $(this), 
    master = $('#' + $lazy.data('master'))[0]; 

    $lazy.src(master.src); 
    $lazy.className += master.className; 
    // etc 
});