图片预加载是非常常见的一个功能，PC和移动端都会用到，尤其是在移动端，只要涉及到较多图片的加载都会用到该技术。下面是移动端用到的，引入了zepto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style type="text/css">
*{margin:0;padding:0;}
.img-wrap{100%;overflow: hidden;background-repeat: no-repeat;background-size: cover;}
.img-wrap img{100%;}
</style>
</head>
<body>
<div class="lazyload-wrap">
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
</div>
</div>
<script type="text/javascript" src="script/zepto.min.js"></script>
<script type="text/javascript" src="script/lazyload.js"></script>
</body>
</html>
lazyload.js:
var lazyload = function(container) { var lazyClsName = "util-lazyload";//图片样式名 var $container = container; var threshold = 1; //获取容器下面需要懒加载的元素 function getLazyElements(container) { return $container.find("." + lazyClsName); } //浏览器滚动轴滚动 var handleScroll = function() { var elements = getLazyElements(container); elements.each(function() { if (!belowTheFold($(this))) { $(this).trigger("appear"); } }); for (var i = 0, length = elements.length; i < length; i++) { if (elements[i].loaded === true) { $(elements[i]).removeClass(lazyClsName); } } }; if ($container.data("lazyload") !== true) { $(window).on('scroll', handleScroll); $container.on("appear", "." + lazyClsName, function(e) { var target = e.target; if (target.loaded !== true) { preload($(target)); target.loaded = true; } }); $(container).data('lazyload', true); } //图片预加载 function preload(element) { var img = document.createElement('img'), src = element.attr('data-origin'); $(img).bind("load", function() { element.parent().css('backgroundImage', 'url(' + src + ')'); element.css('visibility', 'hidden'); }) .bind('error', function() { $self.css('visibility', 'visible'); }) .attr("src", src); } //判断是否在可视区域 function belowTheFold(element, threshold) { var fold = window.innerHeight + window.scrollY; return fold <= $(element).offset().top; } /* Force initial check if images should appear. */ setTimeout(handleScroll, 0); return $(container); }; lazyload($(".lazyload-wrap"));