要求：
图片延迟加载。未加载完显示加载中。监听图片加载完后，加载中消失。
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>