jq图片懒加载，支持background-image背景图

修复旧版以background-image背景图方式加载图片时用 placeholder 图片提前占位功能失效的bug

码云：完整代码

点击此处有惊喜哦

图片调用方法：
为图片加入class名lazy 图片路径引用方法用data-original

 <style>/* 以背景图方式加载时需要设置该样式 */.commodity-img{width: 765px;height: 574px;background-repeat: no-repeat;background-position: center;background-size: cover;flex-shrink: 0;}</style>

background-image背景图方式加载图片

<div class="lazy commodity-img" data-original="img/bmw_m1_hood.jpg"></div>
<div class="lazy commodity-img" data-original="img/bmw_m1_side.jpg"></div>
<div class="lazy commodity-img" data-original="img/viper_1.jpg"></div>
<div class="lazy commodity-img" data-original="img/viper_corner.jpg"></div>
<div class="lazy commodity-img" data-original="img/bmw_m3_gt.jpg"></div>
<div class="lazy commodity-img" data-original="img/corvette_pitstop.jpg"></div>

img方式加载图片

<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
<script type="text/javascript" charset="utf-8">$(".lazy").lazyload({placeholder : "img/image_pp.jpg", // 用图片提前占位，值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏effect: "fadeIn", // 载入使用何种效果，effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn// threshold: 200, // 提前开始加载，值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉// event: 'click',  // 事件触发时才加载，值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…// container: $("#container"), // 对某容器中的图片实现效果，值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片failurelimit : 10, // 图片排序混乱时，值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.});
</script>

转载请附上原文出处链接。

jq图片懒加载，支持background-image背景图相关推荐

load方法引入本地html报错,分享基于plus.downloader的图片懒加载功能，支持本地缓存v1.1.0...
今天试用了下hello mui上的图片懒加载功能,发现有些地方还无法满足我的需求,ajax动态加载的时候无法实现懒加载. 然后又看了下36kr的示例,因为代码关系实在太多了,耦合度比较高,遂自己动手写 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.10 image组件，如何实现图片懒加载？
一.与image组件有关的技术问题 1.1 什么是WebP? webp是image组件的一个boolean属性,开启这个属性之后,代表url可以设置webp这种格式的图片.webP是一种同时提供了有损 ...
template与图片懒加载
曲线救国的三种案例第一种:underscore.js的图片懒加载 1 <script id="t2" type="text/template"> ...
小程序之图片懒加载[完美方案，你不来看看？]
效果图既然来了,把妹子都给你. 定义懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 实现原理监 ...
document引用图片的src属性能干嘛_如何实现图片懒加载
背景图片懒加载是针对图片加载时机的一种优化,在一些图片量比较大的网站(比如电商网站首页,或者团购网站.小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白 ...

jq图片懒加载，支持background-image背景图

jq图片懒加载，支持background-image背景图相关推荐

最新文章

热门文章