2011-01-24 7 views
1

私は多くの画像と遅延ロードされている場合にはより良く動作する他のコードを持つページを持っています。javascriptを使用しているユーザーのコンテンツを遅延ロードするにはどうすればよいでしょうか?

私はnoscriptタグでこれをやろうとしていましたが、IEで正しく動作していないことに気付きました。私がテストした他のすべてのブラウザ(ff、opera、chrome、safariなど)で動作するので、少し不満です。

ちょっとしたテクニックを使っていてかなり頻繁にIEをテストしているので、実際に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を使用してユーザーに使用HTMLとJavaScriptなしでは同じです。 jqueryを使用してコンテンツをタブで表示しやすくするだけです。コンテンツはjavascriptでタブ付けされているため、タブが開いたときに読み込みを遅延させる必要があるため、ページにかなりの添付ファイルがある場合に最初にダウンロードするまでに時間がかかりません。

htmlを何度も出力せずにこれを実現するにはどうすればよいですか?

+1

のようなものを使用して、JavaScriptをlazyloadができスクリプトが有効になっている場合、IEはDOMにnoscript要素タグを追加しないことと思われます。参照してください:http://www.tjs.co.uk/blog/a-tale-of-accessibility-internet-explorer-and-the-noscript-tag.htm – Raynos

答えて

0

あなたがする必要があるのは、すべての画像がピクセルのgif(またはpng)を指していることです。ユーザーがイメージの近くをスクロールしたかどうかを確認し、Javascriptを使用してピクセルをフルイメージと交換するスクリプトを作成します。

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

代わりに、あなたがplugin like thisを使用することができます。私が書いたスクリプトで

は、あなたがのように見えるイメージタグを持っているでしょう。注:以前はこのプラグインを使用していませんが、必要なすべてのものに見えます。あなたが本当にハードコアを取得したい場合は

、あなたは時間ead.jsまたはcontrol.js

+0

私はコンテンツが画像のみ。私は、ユーザーがコンテンツのセクションを見るためにクリックできるタブにコンテンツを分割するためにjavascriptを使用しています。私は1pxイメージを使うのは良い考えではないと思います。なぜなら、ユーザーにはjavascriptがなければ、すべてを見ることができるからです。ページは非常に長く、ダウンロードに少し時間がかかります。 – user319862

+0

その場合は、タブのコンテンツを取得するためにajaxリクエストを行う必要があります。 noscriptを使用する代わりに、javascriptなしでコンテンツを見栄え良くして、javascriptでタブを含む要素を含むクラスを作成するのはなぜですか? – dawnerd

+0

それは基本的に私がやっていることです。 javascriptとnoscriptに使用されるhtmlは同じですが、CSSスタイルはちょうど異なっています。 noscriptタグを使用すると、ブラウザでjavascriptでタブを開く前にブラウザがコンテンツを表示しない(画像を取得したり、フラッシュを実行したりするなど)、遅延読み込みを行うことができます。 htmlがすでに利用可能なので、私は実際にajaxリクエストを使ってサーバ側で2回書く必要を避けることを望んでいました。 javascriptを使っているユーザーのためにページを何度も生成する方法はありませんか?私はすべてのコンテンツのためにhttp要求を1つにカットするのが好きでした。 – user319862

関連する問題