jQuery图片加载显示loading效果


Posted in Javascript onNovember 04, 2016

在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图:

jQuery图片加载显示loading效果

最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替。

jQuery图片加载显示loading效果

页面引用

<div class="container">
 <div class="row block" id="img-list">
 <div class="col-md-3">
  <img src="/Assets/OnePiece/1.jpg" class="img-thumbnail">
 </div>
 <div class="col-md-3">
  <img src="/Assets/OnePiece/2.jpg" class="img-thumbnail">
 </div>
 <div class="col-md-3">
  <img src="/Assets/OnePiece/3.jpg" class="img-thumbnail">
 </div>
 <div class="col-md-3">
  <img src="/Assets/OnePiece/4.jpg" class="img-thumbnail">
 </div>
 <div class="col-md-3">
  <img src="/Assets/OnePiece/5.jpg" class="img-thumbnail">
 </div>
 <div class="col-md-3">
  <img src="/Assets/OnePiece/6.jpeg" class="img-thumbnail">
 </div>
 <div class="col-md-3">
  <img src="/Assets/OnePiece/7.jpg" class="img-thumbnail">
 </div>
 <div class="col-md-3">
  <img src="/Assets/OnePiece/8.jpg" class="img-thumbnail">
 </div>
 </div>
</div>
<script src="~/Scripts/ImgLoading/ImgLoading.js"></script>
<script>
 $("#img-list").ImgLoading({
 errorimg: "/Scripts/ImgLoading/images/noimage.png",
 loadimg: "/Scripts/ImgLoading/images/load.gif",
 timeout: 800
 });
</script>

下面是插件脚本,为了突出加载的效果就加上了延迟时间。

;(function ($) {
 $.fn.extend({
 ImgLoading: function (options) {
 var defaults = {
 errorimg: "http://www.oyly.net/Images/default/Journey/journeydetail.png",
 loadimg: "http://www1.ytedu.cn/cnet/dynamic/presentation/net_23/images/loading.gif",
 Node: $(this).find("img"),
 timeout: 1000
 };
 var options = $.extend(defaults, options);
 var Browser = new Object();
 var plus = {
 BrowserVerify:function(){
  Browser.userAgent = window.navigator.userAgent.toLowerCase();
  Browser.ie = /msie/.test(Browser.userAgent);
  Browser.Moz = /gecko/.test(Browser.userAgent);
 },
 EachImg: function () {
  defaults.Node.each(function (i) {
  var img = defaults.Node.eq(i);
  plus.LoadEnd(Browser, img.attr("imgurl"), i, plus.LoadImg);
  })
 },
 LoadState:function(){
  defaults.Node.each(function (i) {
  var img = defaults.Node.eq(i);
  var url = img.attr("src");
  img.attr("imgurl", url);
  img.attr("src",defaults.loadimg);
  })
 },
 LoadEnd: function (Browser, url, imgindex, callback) {
  var val = url;
  var img = new Image();
  if (Browser.ie) {
  img.onreadystatechange = function () {
  if (img.readyState == "complete" || img.readyState == "loaded") {
  callback(img, imgindex);
  }
  }
  } else if (Browser.Moz) {
  img.onload = function () {
  if (img.complete == true) {
  callback(img, imgindex);
  }
  }
  }
  img.onerror = function () { img.src = defaults.errorimg }
  img.src = val;
 },
 LoadImg: function (obj, imgindex) {
  setTimeout(function () {
  defaults.Node.eq(imgindex).attr("src", obj.src);
  }, defaults.timeout);
 }
 }
 plus.LoadState();
 plus.BrowserVerify();
 plus.EachImg();
 }
 }); 
})(jQuery);

脚本是从网上搜索代码之后整理的,也是第一次写插件,如果有啥写的不对的,还请多多指教!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 #Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 #Javascript
简单学习vue指令directive
Nov 03 #Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 #Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 #Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 #Javascript
探索Vue.js component内容实现
Nov 03 #Javascript
You might like
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python获取从命令行输入数字的方法
2015/04/29 Python
深入理解python中的atexit模块
2017/03/07 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
专升本自我鉴定
2013/10/10 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Java基于字符界面的简易收银台
2021/06/26 Java/Android
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python