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 HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
js实现拖动缓动效果
Jan 13 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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+javascript液晶时钟
2006/10/09 PHP
PHP单链表的实现代码
2016/07/05 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
Python实现的最近最少使用算法
2015/07/10 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
2014年乡镇人大工作总结
2014/11/25 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL