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

Question

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

的属性

在将属性更改为visible或display: block;

之前，如何阻止浏览器加载此div的内容

Answer 1

您可以使用脚本块插入无法解析的标记。

https://jsfiddle.net/dhj3cshb/

并在show上将其替换为真实标记

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