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开发时的五个注意事项
Dec 08 Javascript
js的闭包的一个示例说明
Nov 18 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JavaScript数组常用方法
Mar 02 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 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安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
dojo 之基础篇
2007/03/24 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
python海龟绘图实例教程
2014/07/24 Python
Python常用内置函数总结
2015/02/08 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python实现的建造者模式示例
2018/08/06 Python
python实现机器学习之元线性回归
2018/09/06 Python
详解python中递归函数
2019/04/16 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
土木工程应届生自荐信
2013/09/24 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
元旦趣味活动方案
2014/08/22 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
教师反邪教心得体会
2016/01/15 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS