jquery - 按需加载图像(或禁用隐藏图像的加载)

Question

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

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

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

在我的例子中，它最终会一次加载大约 350 张图像。这是一个很多，特别是考虑到图像至少是200kb。事实上，网络日志指定网站总大小在6mb 到 7mb 范围内。

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

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

• 将每个子 div 作为 ajax 加载。这是不可能的，页面内容必须始终存在。
• 隐藏图像本身(希望网络浏览器不会加载它们)。这失败了，浏览器仍然使用 CSS 加载图像 display:none; .
• 可能的解决方案:故意破坏标记(服务器端)，以便浏览器不加载图像，例如；写作 <img alt="abc.jpg" src="about:blank"/> ，然后当标签切换时，我会用 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 的帮助。