LazyLoad按需懒加载使用方法

LazyLoad介绍LazyLoad效果截图LazyLoad是一款非常热门的图片缓加载JS插件,您能看到的大部分网站图片懒加载都是基于这款JS框架开发。LazyLoad功能LazyLoad懒加载框架可以使图片缓加载,滚动条没拖到的

[时间:03-02]    [浏览:]    [放入收藏夹]    [查看详情]

LazyLoad介绍

LazyLoad按需懒加载使用方法
LazyLoad效果截图

LazyLoad是一款非常热门的图片缓加载JS插件,您能看到的大部分网站图片懒加载都是基于这款JS框架开发。

LazyLoad功能

LazyLoad懒加载框架可以使图片缓加载,滚动条没拖到的地方暂不加载图片,优先加载用户能看到的图片,等用户拖到了再次加载图片,减少页面首次加载带宽,加快网页访问速度。

LazyLoad使用方法

1、首先下载LazyLoad插件:https://GitHub.com/tuupola/lazyload/archive/2.x.zip

2、修改需要缓加载的图片代码如以下格式,

<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">

src:用一张还没加载显示的图片,比如精准像素用的一张LOGO图片

data-src:为真实图片路径

3、加载JS,一般还需要jquery框架

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>    
<script src="lazyload.min.js"></script>
<script>
lazyload();
</script>

  本文转载自:精准像素:11px.cn ,感谢作者分享实用知识


标签: