700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > lazyload mysql_lazyload懒加载和swiper轮播懒加载的用法

lazyload mysql_lazyload懒加载和swiper轮播懒加载的用法

时间:2023-10-31 01:04:05

相关推荐

lazyload mysql_lazyload懒加载和swiper轮播懒加载的用法

对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度,比如商城网页。

lazyload使用方法:

载入 JavaScript 文件:

修改 HTML 代码中需要延迟加载的 IMG 标签:

调用 Lazy Load:

$('img.lazy').lazyload();

参数参考网址:/jquery/lazyload/

Lazy Load遇到的问题:当图片只指定width而没有设定height的时候,图片未加载时的占位是width=height的大小;

项目中遇到的问题,当页面中同时使用swiper插件做图片轮播的时候,就不能使用Lazy Load来处理轮播的图片,这时就需要使用swiper的延迟加载参数-lazyLoading:true;

具体使用方法:(/api/Images//0308/213.html)

设为true开启图片延迟加载,使preloadImages无效。

需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy。

背景图的延迟加载则增加属性data-background(3.0.7开始启用)。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
LazyLoad懒加载

LazyLoad懒加载

2023-04-16

图片懒加载 lazyload

图片懒加载 lazyload

2019-12-14

图片懒加载——lazyload

图片懒加载——lazyload

2020-03-09

lazyLoad-懒加载

lazyLoad-懒加载

2022-01-28