码迷,mamicode.com
首页 > 其他好文 > 详细

前端性能优化技术(一):图片懒加载

时间:2016-09-18 22:16:46      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

<!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、提高用户的体验。

前端性能优化技术(一):图片懒加载

标签:

原文地址:http://www.cnblogs.com/gao-xiong/p/5883092.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!