web前端之懒加载

        懒加载技术 可以减少图片对服务器的一次性请求,做到按需加载,提升用户体验。比较代表性的解决方案有 lazyload.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./jquery.lazyload.js"></script>
</head>
<body>
    <img width="765" height="574" data-original="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=07da357b91504fc2bd5fb605d5dce7f0/c8177f3e6709c93d583bb784953df8dcd00054f3.jpg">
    <img width="765" height="574" data-original="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a9c7db165de736d147138a08ab524ffc/241f95cad1c8a786d8dedfc46e09c93d71cf5007.jpg">
    <img width="765" height="574" data-original="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=29e32c22b53eb1355bc7b1bb961ca8cb/7a899e510fb30f24eb4eecc9c195d143ac4b0327.jpg">
    <img width="765" height="574" data-original="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3d7b470a8b025aafcc3278cbcbecab8d/f3d3572c11dfa9ec667b57dd6bd0f703908fc1a7.jpg">
    <img width="765" height="574" data-original="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=07da357b91504fc2bd5fb605d5dce7f0/c8177f3e6709c93d583bb784953df8dcd00054f3.jpg">
    <img width="765" height="574" data-original="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=c0bf9c7b5943fbf2da2ca023807fca1e/9825bc315c6034a8583c01f2c1134954082376e2.jpg">
<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn"});
    });
</script>
</body>
</html>

拷贝这段代码,网上可以找到 jquery.lazyload.js 插件地址,也可以单击使用超链接地址。

打开浏览器,访问该页面,可以看到图片一张张慢慢淡入,图片的网络请求也是一个慢慢按需加载,而不是一次全部访问加载显示。

如图:

冷暖自知一抹茶ck

冷暖自知一抹茶ck
请先登录后发表评论
  • 最新评论
  • 总共0条评论