JavaScriptを使用してユーザーにとって怠zyなロードコンテンツのより良い方法は何ですか？

StackOverflow https://stackoverflow.com/questions/4786985

質問

たくさんの画像やその他のコードがあるページがあり、怠zyなロードがあればうまく機能します。

私はこれをnoscriptタグでやろうとしていましたが、IEで正しく機能していないことに気付きました。私がテストした他のすべてのブラウザ（FF、オペラ、クロム、サファリなど）で動作するので、私は少しイライラしています。

ある時点で、私は実際にこれをIEで実際に動作させていたと確信しています。しばらくの間、私は非常に頻繁にテストしています...しかし、それは今機能していませんが、私がGoogleが提案しているようですそれが機能しなかったこと。

私が試みていたことを示すコピーと貼り付けの簡単な例を次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

JavaScriptおよびJavaScriptを使用しないユーザーに使用されるHTMLは同じです。 jqueryを使用してコンテンツをタブにして、表示しやすくします。コンテンツはJavaScriptにタブにされているため、タブが開いたときに怠loadロードが必要なので、ページにかなりの添付ファイルがあるときに最初にダウンロードするのに何年もかかりません。

HTMLを複数回出力せずにこれを達成するにはどうすればよいですか？

役に立ちましたか？

解決

必要なのは、すべての画像をピクセルGIF（またはPNG）にポイントすることです。ユーザーが画像の近くにスクロールしているかどうかをチェックするスクリプトを作成し、JavaScriptを使用してピクセルを完全な画像と交換します。

私が書いたスクリプトでは、次のように見える画像タグがあります。

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

あるいは、aを使用できます このようなプラグイン. 。注：このプラグインを以前に使用したことはありませんが、必要なのはそれだけだと思われます。

本当にハードコアを手に入れたいなら、hのようなものを使用してJavaScriptをレイジーロードすることができますead.js また control.js

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top