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轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
使用JavaScript破解web
Sep 28 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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 session 错误
2009/05/21 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php生成随机数的三种方法
2014/09/10 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
python中的yield from语法快速学习
2020/11/06 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
四风专项整治工作情况汇报
2014/10/28 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
年会邀请函范文
2015/01/30 职场文书
大班下学期个人总结
2015/02/13 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python