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在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
angularjs自定义过滤器demo示例
Aug 24 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP用反撇号执行外部命令
2015/04/14 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JS中style属性
2006/10/11 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python分析作业提交情况
2017/11/22 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python实现五子棋程序
2020/04/24 Python
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
一年级家长会邀请函
2014/01/25 职场文书
党建工作经验交流材料
2014/05/25 职场文书
2015年端午节活动总结
2015/02/11 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
导游词之山东红叶谷
2019/10/31 职场文书