Question

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

最初，除主要部分外，所有子div都被隐藏。

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

在我的具体情况下，它最终将一次加载大约350张图像。这是一个很多，特别是在考虑图像至少 200kb 时。实际上，网络日志指定网站总大小在 6mb到7mb 的范围内。

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

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

将每个子div加载为ajax。这是不可能的，页面内容必须始终存在。
隐藏图像本身（希望Web浏览器不加载它们）。这失败了，浏览器仍然使用CSS display:none;加载图像。
可能的解决方案：故意破坏标记（服务器端），以便浏览器不加载图像，例如;写<img alt="abc.jpg" src="about:blank"/>，然后当tab切换时，我会用jQuery正确修复标记。我还没有尝试过这个，是否可取？

Answer 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 提供的帮助。

按需加载图像（或;禁用加载隐藏图像）

1 个答案: