在前端网页加载中，常用到的一项技术就是图片懒加载技术，用以减少页面加载时请求的文件数量太多造成网页较大，加载缓慢；
懒加载的实现原理为在获取到图片所在位置后，对尚未出现在用户事视野中的图片先不进行服务器请求，而是将路径存储在data-original属性中，在图片即将被用户浏览，或在自定义设置距离屏幕底部还有某段距离时开始请求服务器，而后浏览器开始渲染图片；从而先加载用户率先看到的图片，提高网页加载速度；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>君凯商联网</title>
</head>
<body>
<img class="lazy" data-original="img/qiqiu.png" width="400" height="400">
<script src="js/jquery.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>
$(function () {
//threshold:距顶部参数值时开始加载图片； placeholder：与input 中的placeholder效果基本一致，图片无值时显示的占位图片
$("img.lazy").lazyload({ threshold: 200, placeholder: "loader.gif" });
});
</script>
</body>
</html>
君凯商联网 - Alex.Ma