display:none及textarea实现按需加载、延迟加载、懒惰渲染

display:none：只有在子元素上的背景图片可以做到懒惰渲染，img标签、video,swf,script等都不可以。

<div style="display:none"><img src="https://static.xinran001.com/frontend/website/build/images/logo.png" alt=""></div>

<div style="display:none;">

<span style="display:inline-block;width:200px;height:200px;background:url(https://static.xinran001.com/frontend/website/build/images/logo.png)"></span>

</div>

做为背景时，Network里就看不到logo.png图片的请求。

textarea：任何加载资源元素，例如：img,video,swf,script等

举列说明，例如现在有这样需求，如果浏览器支持Flash插件就显示flash，否则显示其它内容。

<div class="swfbox">

    <div class="noFlash" style="display:none">
            <textarea style="display:none">
                    <img src="https://static.xinran001.com/frontend/website/build/images/logo.png">
                    <a href="">开始下载</a>
            </textarea>
    </div>

    <div class="flashbox">
        <object height="100%" width="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0">
            <param value="index.swf" name="movie">
            <param value="high" name="quality">
            <param value="transparent" name="wmode">
            <param value="always" name="allowScriptAccess"> 
            <embed height="100%" allowScriptAccess="always" width="100%" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" quality="high" src="index.swf">
        </object>
    </div>

</div>

(function(){

    try {

        if(window['ActiveXObject']){

            const c = new window['ActiveXObject']("ShockwaveFlash.ShockwaveFlash");
    
            if(c) return;
    
        }

        
    } catch (error) {}
    


    const {plugins} = navigator;

    if(plugins && plugins.length > 0){

        const c = plugins["Shockwave Flash"];

        if(c) return;
    }
    

    .....
    flashBox.style.display = 'none';

    noFlash.style.display = 'block';

    noFlash.innerHTML = noFlash.getElementsByTagName('textarea')[0].value;


}());

页面需要百分比自适应浏览器，所以这里display:none派不上用场，只能用textarea来做按需加载（避免不必要的资源浪费，在支持flash播放时，不用请求加载图片资源）。

textarea结合Intersection Observer实现滚动到相应区域执行延迟加载、懒惰渲染某一块内容也是可行的。