移动端图片延迟加载

http://runjs.cn/detail/yxwujgwk

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="http://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"> <style type="text/css"> body { margin: 0; padding: 0; background-color: #006396; } .container { margin: 0 auto; width: 1200px; } img { float: left; margin: 20px; width: 558px; height: 558px; border: 1px solid #015D8C; } </style> </head> <body> <div class="container"> <img src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> <img data-src="http://dummyimage.com/558x558/2E7FA9/FFF"> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> /* 图片延迟加载插件 */ (function($) { $.fn.scrollLoading = function(options) { var defaults = { attr: "data-src" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]); if (!url) { return } var data = { obj: $(this), tag: node, url: url }; params.cache.push(data) }); var loading = function() { var st = $(window).scrollTop(), sth = st + $(window).height(); $.each(params.cache, function(i, data) { var o = data.obj, tag = data.tag, url = data.url; if (o) { post = o.position().top; posb = post + o.height(); if ((post > st && post < sth) || (posb > st && posb < sth)) { if (tag === "img") { o.attr("src", url) } else { o.load(url) } data.obj = null } } }); return false }; loading(); $(window).bind("scroll", loading) } })(jQuery); /* 图片延迟加载引用 */ $(function() { var LoadImg = $("img"); LoadImg.load(function() { $(this).hide(); $(this).addClass("zoomIn animated").one("webkitAnimationEnd animationend", function() { $(this).removeClass("zoomIn animated") }).show() }); LoadImg.scrollLoading() }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 移动端图片延迟加载