延迟加载图片并监听图片加载完成

要求：

图片延迟加载。未加载完显示加载中。监听图片加载完后，加载中消失。

demo:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta name="format-detection" content="telephone=no"><script src="zepto.js"></script><title></title><style>.mod-load{text-align: center;padding: 15px 0;color: @fontColor4;font-size: 12px;@-webkit-keyframes loading{0%{-webkit-transform: rotate(0deg);}50%{-webkit-transform: rotate(180deg);}100%{-webkit-transform: rotate(360deg);}}.icon-loading{display: inline-block;width: 15px;height: 15px;vertical-align: -4px;margin-right: 6px;transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-animation-name: loading;-webkit-animation-duration: 1.2s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-moz-animation-name: loading;-moz-animation-duration: 1.2s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;}.icon-loading.list-noload{padding: 10px 0;font-size: 14px;line-height: 40px;}}</style>
</head>
<body>
<img class="lazyloadImg" data-src="http://tgi12.jia.com/115/444/15444255.jpg"></img>
<img class="lazyloadImg" data-src="http://tgi13.jia.com/115/438/15438819.jpg"></img>
<script>var $img=$('.lazyloadImg');var $body=$('body');var $imgsrc;var src;var imgLoad;for (var i=0;i<$img.length;i++){loading();$imgsrc=$($img[i]);src=$imgsrc.attr('data-src');$imgsrc.attr('src',src).removeAttr('data-src');imgLoad =document.querySelectorAll(".lazyloadImg")[i];imgLoad.addEventListener("load",function(event){$('.mod-load').remove();});}function loading(){var loadingHtml = '<div class="mod-load list-loading">'+   '<img class="icon-loading" src="http://m.baidu.com/static/search/3600/bdoor_loading.png">'+   '加载中...'+ '</div>';$(loadingHtml).appendTo($body);}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/mywaystrech/p/5009919.html

延迟加载图片并监听图片加载完成相关推荐

vue组件加载完成之后执行方法_vue-cli监听组件加载完成的方法
在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能. 1.安装vuex npm install vuex --sav ...
js - 预加载+监听图片资源加载制作进度条
这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图本 ...
Mr.J-- jQuery学习笔记(二十五)--监听DOM加载
页面元素 <body> <div></div> <div></div> <div></div> <div> ...
Android 使用AsyncTask 后监听异步加载完毕的动作
AsyncTask 的使用方法网上有很多例子,使用起来也非常的方便.这里就不详细说具体的使用方法了,同学可以Google 一下,很多. 场景模拟当我们在加载一个列表的时候,比如GridView ,这 ...
WebView监听网页加载成功与失败
问题说明: 现在好多APP在应用中会内嵌webview,好多时候需要监听webview是否加载成功与失败.当加载成功的时候会回调WebViewClient的onPageFinished方法:当加载失败 ...
Android 使用AsyncTask 后监听异步加载完毕的动作-（by terry-龙）
AsyncTask 的使用方法网上有很多例子,使用起来也非常的方便.这里就不详细说具体的使用方法了,同学可以Google 一下,很多. 场景模拟当我们在加载一个列表的时候,比如GridView ,这 ...
php监听iframe加载完成,window_IE iframe的onload方法分析小结，判断iframe是否加载完成的完美 - phpStudy...
IE iframe的onload方法分析小结判断iframe是否加载完成的完美方法IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方 ...
vue监听下滑加载（移动端）
data(){ return {current_page:1,//默认第一页isAll:false,//判断是否加载完showSearchFlag: false,//判断是上滑还是下滑list:[], ...
vue之 watch 监听数据变化 watch的使用、watch监听数据加载完成后执行、watch不触发、不生效的解决办法及原理
常用方法: watch监听数据完成后执行函数: watch: {huxing: {handler: function(newVal, oldVal) {this.huxingW();},deep: t ...

延迟加载图片并监听图片加载完成

延迟加载图片并监听图片加载完成相关推荐

最新文章

热门文章