如何在显示内容之前显示内容图像不加载的隐藏内容？答案

【问题标题】：How to show hidden content where the contents images don't load until the content is shown?如何在显示内容之前显示内容图像不加载的隐藏内容？
【发布时间】：2012-01-30 09:54:00
【问题描述】：

什么是使用 javascript 显示隐藏内容的好方法，而不需要隐藏内容的图像元素 <img src="myimage.jpg"> 将其图像加载到谷歌浏览器或任何其他浏览器中，直到内容实际显示？

使用 css 规则 display: none 隐藏内容不会阻止图像加载，我想避免使用 ajax 调用。

【问题讨论】：

你为什么要这样做？如果用户处于连接不良的远端怎么办 - 每次他们“显示”内容时，他们首先会得到没有图像的内容，然后必须等待他们加载。然而，如果你不理会它，当他们切换（可能）时，他们会准备好。
@Damien_The_Unbeliever 因为这个内容很少见，但出现在网站的每个页面上，我想将普通观众的 http 请求量减少到最低限度。（大约有 200 个，我将它们减少到 84。35 秒对 9 秒）。我知道我可以使用 ajax，但是这个内容需要的 html 太少了，所以有一个 ajax 请求似乎有点过头了。
您也许可以创建一个以在提供 src 后加载。试试这个jsfiddle.net/LYMRV
@YuriKolovsky：你使用 jquery 吗？如果它解决了这个问题，你可以这样做吗？
@Chris 如果它解决了问题，我可以使用 jquery，但如果可以使用，我宁愿使用非 jquery 解决方案。我总是可以将 jquery 解决方案重写为普通的 javascript。

标签： javascript html image httprequest show-hide

【解决方案1】：

EDIT 1 如 cmets 中所述，更好的选择是使用模板。作为一个例子，我选择了John Resig’s Microtemplating engine：

<div id="content_container">
    <script type="text/html" id="content">
        <div>
            <img src="..."/>
        </div>
    </script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>

见fiddle

编辑 2

正如原发帖人所评论的，完全有可能获取<script type="text/html"> 元素的内容。不需要模板引擎：

<div id="content_container">
    <script type="text/html" id="content">
        <div>
            <img src="..."/>
        </div>
    </script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>

第一个答案

（见编辑）

【讨论】：

在 document.ready 触发时浏览器不会加载图像吗？
@Chris 据我所知，会的。
不，它在加载任何资产之前触发
@ori，是的，它在加载任何资产之前触发，但我认为它在加载资产时执行。
知道<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">Show content</button> 工作得一样好，并且没有依赖关系。

【解决方案2】：

要在您的要求范围内做您想做的事，您可以让 javascript 在您希望显示内容时编写内容。因此，您可以将 HTML 存储在 javascript 字符串中，然后在需要时使用脚本将其插入页面。这不是一个很好的方法，但这意味着它只会在那时加载图像。

或者，您可以将 HTML 放入其中，但让图像不指向任何内容（或空白占位符等），然后在调用 show 函数以显示页面时使用脚本以编程方式将图像源填充为正确的值.

尽管我更喜欢第二种方法（只是调整图像源），但您选择其中的哪一个可能更多的是关于可读性。

【讨论】：

我也可以将内容存储为javascript，通过json编码服务器端，然后呈现内容，但这需要我使用服务器端编程来捕获html。

【解决方案3】：

首先，定义一个 CSS 样式：

.invisible {
    display: none;
}

将此类添加到 HTML 中的对象。然后在 JavaScript 中的任何位置，只需添加或删除类，或将显示更改为 block 或 float 等。在 jQuery 中：

http://api.jquery.com/addClass/

http://api.jquery.com/show/

编辑：

如果您不想加载图像，请改用 AJAX 调用。

http://api.jquery.com/jQuery.get/

jQuery.get('myImage.jpg', function(data) {
  jQuery('.imageContainer').html(data);
});

编辑 2：

在需要时将 src 加载到 img 中。您可以检查滚动位置等。

http://jsfiddle.net/LYMRV/

【讨论】：

display: none 不会阻止 img 元素加载它们的图像。
查看我的更新。您只需使用 .get() 调用请求数据并将数据输入到 HTML 元素。
但是如果我不想使用 ajax 调用怎么办？还有其他方法吗？
我也可以考虑存储base64，但我认为这不是一个好方法。 ajax调用有什么问题？您在需要图像时拨打电话，它会将其添加到您的 DIV 等中。

【解决方案4】：

似乎可以使用 type="text/html" 的脚本标签来隐藏内容，它甚至可以防止任何图像和 iframe 在后台加载，例如：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
    if(e.target.id=='content_show'){
        e.preventDefault();
        document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
    }
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
<a href="#showcontent" id="content_show">Show Content</a>
<div id="content_visible"></div>
</body>
</html>

唯一要记住的是避免在#content_hidden 中放置脚本标签。

现在如果有人足够友好地指出这种方法的每一个缺陷，那么我们都可以受益。

【讨论】：