実行コード、CSSがロードされますが、画像が

Question

をダウンロードされる前に、私はウェブサイトを持っていた後、直面している問題は

イメージですダウンロードに時間がかかり、私のシステムでは、完全なウェブサイトをダウンロードするために約20秒かかります。それらはwindow.loadイベントに隠れるローダーです。つまり、完全なWebサイトがロードされたとき（20秒）です。

document.readyイベントでローダーを非表示にすると、ウェブサイトが速くて、ユーザーにはうってつけです。しかし、ここでの問題は、CSSを2秒間適用しないと表示されるコンテンツがあり、それは奇妙に見えるということです。

画像がなくてもCSSが読み込まれるとすぐにローダーを非表示にする方法を探しています。あなたがそうのようdata-src用画像srcを交換されるために働くことがあり、私が過去にやった

Answer 1

何か：

<img src="" data-src="your-image.jpg" alt="some alt description"> 

その後、すべてを行う必要があるDOMをループいくつかのJavaScriptを追加することですSRCのためのデータ-SRCをスワップ：

jQuery(document).ready(function($){ 
    $('img').each(function(){ 
     $(this).attr('src') = $(this).data('src'); 
    }); 
}); 

この技術の利点は、すべての画像がロードされる前にWebページがCSSをレンダリングすることです。そしてそれはまた、ページが本当に速く読み込まれることを意味します。 画像のSEO（GoogleまたはBingの画像）には適していない可能性があります。