zoukankan      html  css  js  c++  java
  • 前端性能优化技术(一):图片懒加载

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>lazyload</title>
    </head>
    <body>
        <div>
            <a href="#"><img class="lazy" src="images/placeholder.gif" data-original="images/5.jpg" height="640" height="480"></a>
            <a href="#"><img class="lazy" src="images/placeholder.gif" data-original="images/6.jpg" height="640" height="480"></a>
            <a href="#"><img class="lazy" src="images/placeholder.gif" data-original="images/7.jpg" height="640" height="480"></a>
            <a href="#"><img class="lazy" src="images/placeholder.gif" data-original="images/8.jpg" height="640" height="480"></a>
        </div>
    </body>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.lazyload.js"></script>
    <script type="text/javascript">
        $(function() {
            $("img.lazy").lazyload({
                effect : "fadeIn",
            });
        });
    </script>
    </html>

    使用步骤:

      1、引入jquery库、版本需求需要按照实际情况

      2、这里必须设置图片的widthheight,否则插件可能无法正常工作。

      3、img的src 放置loading图标,data-original放置图片的真实路径。

    使用图片懒加载的好处:

      1、减轻服务器压力。

      2、提高用户的体验。

    keep learning
  • 相关阅读:
    状态机的常见问题
    基于quartus的高级时序分析
    FPGA中的时钟域问题
    quartus中的时序约束常用方法
    时序约束与时序分析
    FPGA的PCB设计
    AXI4的主机协议代码分析
    selenium 笔记 场景判断
    Codeforces Round #676 (Div. 2) XORwice、Putting Bricks in the Wall、Palindromifier
    Trap HDU
  • 原文地址:https://www.cnblogs.com/gao-xiong/p/5883092.html
Copyright © 2011-2022 走看看