1

基本的には、いくつかのページ コンテンツを含むサブ div の div であるスライダーのようなウィジェットがあります (画像と共に)。

最初は、メイン以外のすべてのサブ div が非表示になっています。

私の問題は、非表示かどうかに関係なく、すべての Web ブラウザーがコンテンツ内のすべての画像をロード (要求) しているように見えることです。

特に私の場合、一度に約 350 枚の画像をロードすることになります。特に画像が少なくとも200kbであることを考えると、これは多くのことです。実際、ネットワーク ログには、Web サイトの合計サイズが6mb から 7mbの範囲にあることが示されています。

これらの画像はすべて、特に他のページ要素 (ボタンなど) の前に読み込まれることが予想されるため、ページの読み込みを妨げます。

私の問題の解決策は何ですか? 私がすでに試したこと：

  • 各サブ div を ajax としてロードします。これは不可能です。ページのコンテンツは常にそこにある必要があります。
  • 画像自体を非表示にします (Web ブラウザーが画像を読み込まないことを期待して)。これは失敗しました。ブラウザはまだ CSS で画像をロードしていましdisplay:none;た。
  • 考えられる解決策:意図的にマークアップ (サーバー側) を壊して、ブラウザーが画像を読み込まないようにします。を書いて<img alt="abc.jpg" src="about:blank"/>、タブが切り替わったら、jQuery でマークアップを正しく修正します。これはまだ試していませんが、お勧めですか？
4

1 に答える 1

1

さて、私が質問で示唆したように、可能な解決策は次のトリックによって達成することができます：

<?php
    // server-side content
    echo str_replace(' src=', ' data-dly="" src="blank.gif" data-src="', $html);
?>

// client-side script
function showPage(id){
    hidePages();

    var page = jQuery('#page'+id);

    page.find('img[data-dly="1"]').each(function(){
        jQuery(this).attr('src',jQuery(this).attr('data-src'));
    }).removeAttr('data-dly').removeAttr('data-src');

    page.fadeIn();
}

注意：@jeffreydevにも助けてくれてありがとう。

于 2011-11-01T09:18:42.180 に答える