jQuery实现图片预加载效果


Posted in Javascript onNovember 27, 2015

本文实例讲述了jQuery实现图片预加载效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jQuery实现图片预加载效果

具体代码如下:

html代码:

<div class="main">
 <br>
 <div class="title">图片预加载</div>
 <div class="content">
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/1.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/2.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/3.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/4.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/5.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/6.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
 </div>
 </div>

js代码:

$(function () {
  $("[lazyLoadSrc]").YdxLazyLoad({
  onShow: function () {
   $(this).parent().next().hide()
  }
  });
 });

本文已被整理到了《jquery图片加载方法汇总》 ,欢迎大家学习阅读。

大家在加载图片时就会看到这种效果,现在知道是实现的过程了吧,希望大家喜欢小编分享的jQuery实现图片预加载效果。

Javascript 相关文章推荐
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
json数据处理及数据绑定
Jan 25 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
Rust中的Struct使用示例详解
Aug 14 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 #Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 #Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 #Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 #Javascript
基于jquery animate操作css样式属性小结
Nov 27 #Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 #Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP使用数组实现队列
2012/02/05 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python实现计算最小编辑距离
2016/03/17 Python
python3.4实现邮件发送功能
2018/05/28 Python
python创建学生成绩管理系统
2019/11/22 Python
Solaris操作系统的线程机制
2015/07/28 面试题
银行办理业务介绍信
2014/01/18 职场文书
服务员岗位职责
2014/01/29 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
考察现实表现材料
2014/05/19 职场文书
法人授权委托书
2014/09/16 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
党的群众路线调研报告
2014/11/03 职场文书
党支部承诺书
2015/01/20 职场文书
教师聘用意向书
2015/05/11 职场文书
交通事故责任认定书
2015/08/06 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python