前端性能优化技术（一）：图片懒加载

最新推荐文章于 2024-05-21 23:21:19 发布

weixin_34345560

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量74

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/gao-xiong/p/5883092.html

版权

<!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、这里必须设置图片的width和height,否则插件可能无法正常工作。

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

使用图片懒加载的好处：

　　1、减轻服务器压力。

　　2、提高用户的体验。

转载于:https://www.cnblogs.com/gao-xiong/p/5883092.html

weixin_34345560

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化技术（一）：图片懒加载

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>lazyload</title></head><body> <div> <a hr...
复制链接

扫一扫