CSS背景图像实现延迟加载的jQuery插件:Zepto Lazy

2021年2月18日09:18:52 发表评论
广告也精彩

大部网站使用的图片延迟加载只对img标签中src属性的图片起作用,对CSS背景(background-image)中的图片无效,例如:

<div class="lazy" style="background-image: url(54.jpg);"></div>

上面的写法一般应该用于响应式设计的缩略图。这篇文章介绍一款可以让CSS背景图片实现延迟加载的jQuery插件 Zepto Lazy。

基本使用方法:

  • 加载jquery和jquery.lazy
  1. <script type="text/javascript" src="jquery.min.js"></script>
  2. <script type="text/javascript" src="jquery.lazy.min.js"></script>
  • HTML
  1. <div class="lazy" data-src="1.jpg"></div>
  2. <div class="lazy" data-src="2.jpg"></div>
  3. <div class="lazy" data-src="3.jpg"></div>
  4. <div class="lazy" data-src="4.jpg"></div>
  5. <div class="lazy" data-src="5.jpg"></div>
  • CSS
  1. div.lazy {
  2.     width700px;
  3.     height467px;
  4.     displayblock;
  5. }
  • JavaScript
  1. $(function() {
  2.     $('.lazy').lazy();
  3. });

 

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ts小陈

发表评论(请规范评论)--评论需审核

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容