javascriptプログレッシブエンハンスメントの方法を怠っている？

Question

私は、ウェブページごとにたくさんの画像を持っているギャラリーオーナーのウェブサイトを構築しています。 したがって、私はウェブページ上に画像を読み込み、最初の読み込みを遅くしたいと考えています しかし、私はこれを「プログレッシブ・エンハンスメント」の仕方で実装したいと考えています。

私はたくさんの遅延読み込みメソッドを見つけましたが、それらはすべて、JavaScriptコードをオフにして、ウェブページが役に立たないように、HTMLコード で手を加える必要があります。 （例えば、imgタグのsrc属性は、画像が遅延ロードされるまで、未設定のままです）。

progressivly私は1つは、以下のものが必要だと思う遅延ロードメソッドを実装するには、次の

1. は、その他のページであっても、画像の取り込みからブラウザを防ぐ が、Javascriptをオンになっている場合にのみ、これを行います（したがって、JavaScript以外のブラウザでは、画像はまだ のように読み込まれます）。これはhtmlを変更せずに行う必要があります。
3. data-src属性にsrc属性を保存sequentuallyこれらの3つのステップから

を下にスクロールしたときに最初のものは1最も難しいと思われる画像を読み込みます。 this stackoverflow discussionでも、プログレッシブエンハンスメントを破壊しない答えは得られませんでした。

誰にもアイデアはありますか？

Answer 1

答えが出ていないので、合理的な解決策を見つけました。

この問題は、javascriptがオンになっているときにブラウザが画像をダウンロードしないようにするために、JavaScriptがオフになっているか利用できないときに画像がダウンロードされていることを確認する必要があります。

一貫して、彼らが「正常な」形式で ているときに、ページ上の画像のロードを停止するにはJavaScriptを使用することは困難である：

<img src="path/to/image.jpg"></img> 

我々は彼らのsrcを削除する必要があると思います、ダウンロードから画像を停止するにはこれを行うには の順序で、DOMを既にロードする必要があります。最適化を行うと、多くのブラウザでは、画像がまだダウンロードされていないことを保証することは困難です。

これに加えて、すでにダウンロードしている画像の中断を防ぐために、 は単純に無駄になるためです。 noscriptタグの外側の画像は代わりに何srcが、data-src属性を持っていないか

<img data-src="path/to/image.jpg" class="lazy"></img> 
<noscript> 
    <img src="path/to/image.jpg"></img> 
</noscript> 

は予告：

はしたがって、私は次のソリューションを使用することを選択しました。これは、lazyloadingスクリプトがイメージを1つずつロードするために使用することができます。

はJavaScriptが使用できない場合にのみ、noscriptブロック内の画像が表示され 、そう（ ジャバスクリプトが使用できないことから、これを行うには方法はありません）.lazyイメージをロードする必要はありませんでしょう。

我々は、しかし、画像を非表示にする必要がありますか：JavaScriptが使用できない場合noscriptブロック内imgタグと同様に

<noscript> 
    <style> 
     .lazy { 
      display: none; 
     } 
    </style> 
</noscript> 

は、このstyleブロックのみをブラウザに表示されます。

関連する文書：srcまたはdata-src属性をレイジー画像にまったく入れないことでhtmlサイズを縮小できると考えました。これは、 のページからの冗長なURLを削除して、いくらかの帯域幅を節約できるため、いいでしょう。

私は、srcの属性を、noscriptブロックのうち、javacriptを使用して抜き出すことができると考えました。ただし、これは不可能です： javascriptはnoscriptブロックの内容にアクセスできません。したがって、上記のスキームは で、私が思い付く最も効率的です。

Answer 2

src属性を指定しないと無効なHTMLです。残念なことに、ほとんどの遅延イメージローダーがどのように機能しますか。私は、有効なHTMLマークアップ、githubのリンクを使用していますlazyloaderに取り組んでいます

： lazyloadedイメージは、NOSCRIPT要素でラップして宣言されるだろうhttps://github.com/tvler/lazy-progressive-enhancement

：

<noscript><img alt="hello!" src="..."></noscript>

と最終的に出力されるhtmlは

<img alt="hello!" src="...">となります。

あなたは、バッチ・ロードを扱うgithubの上のプロジェクト全体を表示&より多くを引っ掛けるイベントが、ここでは単一のnoscriptイメージの範囲での基本的な機能がありますすることができます：

var noscript = document.querySelector('noscript'), img; 
(img = document.createElement('div')).innerHTML = noscript.textContent; 
noscript.parentElement.replaceChild(img.firstChild, noscript);