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

Question

我有一个元素说，一个div内的图像和其他文本。最初，这个div有visibility: hidden;或display: none;

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

Answer 1

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

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属性

<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'); 
    }); 
}