延迟加载图片并监听图片加载完成
生活随笔
收集整理的這篇文章主要介紹了
延迟加载图片并监听图片加载完成
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要求：
圖片延遲加載。未加載完顯示加載中。監聽圖片加載完后，加載中消失。
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
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的延迟加载图片并监听图片加载完成的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 把鼠标、触摸屏、触控笔统一起来，Poin
- 下一篇： 抽屉效果的实现（DrawerLayout