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 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
Angular网络请求的封装方法
May 22 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
使用php清除bom示例
2014/03/03 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php数组转成json格式的方法
2015/03/09 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
python字符串替换的2种方法
2014/11/30 Python
Python 实现简单的电话本功能
2015/08/09 Python
详解Python传入参数的几种方法
2019/05/16 Python
python3实现猜数字游戏
2020/12/07 Python
python基于socket函数实现端口扫描
2020/05/28 Python
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
幼儿园长自我鉴定
2013/10/17 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
项目开发计划书
2014/01/09 职场文书
入学申请自荐信范文
2014/02/26 职场文书
高三家长寄语
2014/04/03 职场文书
班级学习计划书
2014/04/27 职场文书
学风建设演讲稿
2014/09/12 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
教育教学读书笔记
2015/07/02 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技