javascript - 延迟加载隐藏元素，直到您将其在 javascript 中的属性更改为可见？

Question

我在 div 中有一个元素 say、一个图像和其他文本。最初，此 div 具有 visibility: hidden; 或 display: none;

的属性

如何阻止浏览器加载此 div 的内容，直到我将属性更改为 visible 或 display: block;

Answer 1

您可以使用脚本 block 来插入不被解析的标记。

https://jsfiddle.net/dhj3cshb/

并在展示中将其替换为真正的标记

function show(node){
    var $node = $(node);
    $node.not('script').css('display', '');
    $node.filter('script').replaceWith(function(){
        return '<div id="'+this.id+'" class="'+this.className+'">'+this.innerHTML+'</div>';
    });
}

function hide(node){
    $(node).css('display', 'none');
}

然后只需切换显示状态

编辑:

如果它只是延迟加载图像，我将 img-src 写入数据属性并具有将其推送到 src-property 的函数

<img data-src="http://lorempixel.com/400/200/" />

和js

function loadSrcNow(node){
    $(node).filter('img[data-src]').each(function(){
        this.src = this.dataset.src;
        this.removeAttribute('data-src');
    });
}