lazyload.js实现懒加载

超、凢脫俗 2022-06-04 00:16 318阅读 0赞

1：引入

<script type="text/javascript" src="assets/js/jquery.lazyload.min.js"></script>

2：html部分

<img class="lazy" data-original="assets/img/bmw\_m1\_hood.jpg" width="500px" height="500px">

备注：添加class是为了方便下面的js控制/   2.data-original=“”属性是真是图片地址  3.width和height两个属性必须设置不然图片会始终出现在显示区

3：js控制部分

$("img.lazy").lazyload(\{  
        effect: "fadeIn",                                        //这个是显示效果 还有 show 和 sildeshow  
        placeholder : 'assets/img/grey.gif',          //这个是加载前的显示图片

threshold :20,                                          //滚动到距离图片20px时，图片就开始再开始加载  
        event : "click",                                         //图片点击后，才开始加载  
        container: $("\#container"),                      //在滚动容器内的时候用这个，其中后面是选中的容器的id，前提是容器有scroll  
        failure\_limit : 10,                                     //页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载,用它，尽量设置的高些  
        skip\_invisible : true,                                //为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip\_invisible为false;

\});

发表评论取消回复

表情：

评论列表（有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读

相关懒加载

<script type="text/javascript"> // 懒加载 // getBoundCl

向右看齐/ 2023年08月17日 15:55/ 0 赞/ 101 阅读

相关 JS 实现图片延迟加载（懒加载）

实现原理 1. 结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色） 2. 最开始，img 的 src 设置默认

客官°小女子只卖身不卖艺/ 2022年12月29日 06:43/ 0 赞/ 493 阅读

相关懒加载

为什么要使用懒加载？当我们进入到某个页面的时候，会有很多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有啥作用的，白加载了，还降低网

青旅半醒/ 2022年12月13日 00:44/ 0 赞/ 252 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 309 阅读

相关懒加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年05月28日 05:35/ 0 赞/ 326 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 05:35/ 0 赞/ 256 阅读

相关懒加载，预加载

-------------------- 一.懒加载 > 1.what: > > 延迟加载，一种很好的优化网页性能方式。可视区域外的东西不会加载，减少服务器的负载

骑猪看日落/ 2022年05月14日 10:14/ 0 赞/ 328 阅读

相关图片懒加载实现

现在网站页面内容越来越丰富，图片内容也越来越多，而图片过多会导致网页文件过大，从而引发加载缓慢的问题，而图片懒加载就是为解决这一问题而生。首先我们来讲Jquery的懒加载控

我会带着你远行/ 2021年09月20日 09:08/ 0 赞/ 601 阅读

相关懒加载

懒加载 <template> <view> <scroll-view :scroll-into-view="'ss' + curr

亦凉/ 2021年07月25日 12:19/ 0 赞/ 683 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？通俗的讲就是：当访问一个页面的时候，先把`img`元素或是其他元

àì夳堔傛蜴生んèń/ 2021年06月26日 16:06/ 0 赞/ 589 阅读