100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ajax异步延迟加载图片 lazyload.JS实现图片异步延迟加载

ajax异步延迟加载图片 lazyload.JS实现图片异步延迟加载

时间:2023-03-13 15:39:24

相关推荐

ajax异步延迟加载图片 lazyload.JS实现图片异步延迟加载

前言:很多时候网站上很多图片一次性加载会很慢很卡……这个可以帮助你

使用场景:我的使用场景是点击图片再加载图片。

使用很简单,他本身是Jquery插件JS写的,依赖于JS只需要引入就可以了。

引入JS

使用:

以上2种写法是一样的,只是一个把默认图片放在了标签上,一个放在了后面事件中。

src:是默认显示的图片。

data-original:是真实地址的图片。

使用方法:

$("img.lazy").lazyload();// 最简单的使用方法

$("img.lazy").lazyload({effect: "fadeIn", failure_limit: 6, effect_speed: 1000,placeholder:"../css/jquerymobile/images/defImg.jpg"}); 这个就可以把默认图片不写在img标签上而是最后绑定事件中放上去,这句话意思是在页面渲染完成后给样式是lazy的img标签组建添加异步加载事件。

$("img.lazy").lazyload({effect: "fadeIn", failure_limit: 6, effect_speed: 1000,event : "click",placeholder:"../css/jquerymobile/images/defImg.jpg"}); 这个和上面那个几乎是一样的只是点击才会加载真实地址图片。

参数解析:

effect:显示动画(fadeIn/……)还有一些可以网上搜下。

effect_speed:动画时间,默认400毫秒。

failure_limit:默认加载多少张图片(滚动会自动在加载后面的,也就是可视范围内的图片)。

click:事件,点击事件加载图片可以用(还有鼠标一上去各种事件都是可以的)。

placeholder:默认加载的图片地址(也可以在img标签src内写)。

还有很多很多……网络上很多很多……

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