1

我有一个类似滑块的小部件，它基本上是一个包含一些页面内容（连同图像）的子 div 的 div。

最初，所有子 div 都被隐藏，除了主要的。

我的问题是所有网络浏览器似乎都会加载（请求）内容中的所有图像，无论它们是否隐藏。

具体就我而言，它最终会一次加载大约 350 张图像。这很多，尤其是考虑到图像至少有200kb时。事实上，网络日志指定网站总大小在6mb 到 7mb的范围内。

所有这些图像都会阻碍页面加载，尤其是因为它们应该在其他页面元素（例如按钮等）之前加载。

我的问题的解决方案是什么？我已经尝试过的事情：

  • 将每个子 div 加载为 ajax。这是不可能的，页面内容必须一直存在。
  • 隐藏图像本身（希望网络浏览器不会加载它们）。这失败了，浏览器仍然使用 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 回答