Question

使用javascript显示隐藏内容的好方法是什么，如果隐藏内容的图片元素<img src="myimage.jpg">在Google Chrome或任何其他浏览器中加载图片，直到实际显示内容？

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

Answer 1

如评论中所讨论的，

编辑1 ，更好的选择是使用模板。作为一个例子，我选择了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>

第一个答案

（参见编辑）

Answer 2

首先，定义一个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/

Answer 3

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

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

你选择哪一个可能更多是关于可读性而不是其他任何东西，尽管我赞成第二种方法（只是调整图像源）。

Answer 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中放置脚本标记。

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

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

4 个答案: