zoukankan      html  css  js  c++  java
  • 按需加载实现方法

    按需解析HTML

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>按需解析HTML</title>
    </head>
    <body>
    <script type="text/x-template" id="suc_subscription">
        <!--假设这里的样式box-dytz 引用了一张背景图--->
        <div>
        <!--这里暂且用这张图片作为测试,实际中,大家可以替换为任何图片-->
        <img src="http://tid.tenpay.com/wp-content/uploads/2012/12/按需加载.jpg" />
        </div>
    </script>
    <div id="success_dilog"></div>
    <input type="button" value="点我展示HTML"  onclick="showHTML()"  />
    <script>
        function showHTML(){
            document.getElementById('success_dilog').innerHTML =  document.getElementById('suc_subscription').innerHTML;
        }
    </script>
    </body>
    </html>
    需加载图片
    <img width="158" height="158" data-src="http://img2.114msn.com/jindian/20081071153761308.jpg"  />

    使用“按需加载”进行性能优化时,需要合理选择触发的动作。“按需加载”的最大优势在于减少了不必要的资源请求,节省流量,真正实现“按需所取”。但是“按需加载”本身如果使用不当也会影响用户体验,因为“按需加载”的时机在用户触发某动作之后,如果用户的网速比较慢的话,加载脚本或执行脚本可能需要等候较长的时间,而用户则不得不为此付出代价。因此,如果要使用“按需加载”则需要选择正确的触发动作,如果是根据滚动条来触发,可考虑一个目标距离,假设目标距离还有200像素即将进入可视区域,则就开始加载,而不是等到进入了可视区域才加载。以上所讲的各种“按需加载”类型,都可以封装成相应的组件,然后就可以在项目中进行应用。

    http://tid.tenpay.com/?p=4085

  • 相关阅读:
    Python封装发送信息到钉钉群
    centos 7.6 安装php70
    小米5s plus刷机
    centos 7 安装webmin
    交易开拓者旗舰版(TB旗舰版)软件升级中如何迁移用户数据
    centos 7.6 修改vim配色方案
    centos 7.0 读写ntfs分区
    centos iptables 数据转发
    centos 7.6 配置VNC
    win下maridb 10.1.8下主从复制配置
  • 原文地址:https://www.cnblogs.com/iloveyou-sky/p/3617772.html
Copyright © 2011-2022 走看看