可视区域图片懒加载
实现原理，页面滚动时获取需要懒加载的图片，判断此图片是否在可视区域内，是则设置图片data-src地址为src地址，加载图片。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery可视区域图片懒加载</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } img { width: 100%; display: block; } .content { width: 100%; } </style> </head> <body> <div class="content"> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" /> </div> <div class="m1"> <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" /> </div> </div> <script type="text/javascript"> //调用 visibleImgLazyload(); //触发滚动 防止第一屏不加载 $("body,html").scrollTop(1); /** * 可视区域 img 加载 */ function visibleImgLazyload() { //当前窗口高度 var winHeight = $(window).height(); //整个文档高度 var bodyHeight = $(document).height(); //如果图片不满屏，直接加载 if(bodyHeight <= winHeight) { $(".J-lazd").each(function() { var $this = $(this); if($this.attr("data-url") != $this.attr("src")) { //如果为空，src设置为data-src if($this.attr("data-src")) { $this.attr("src", $this.attr("data-src")); } else { $this.attr("data-src", $this.attr("src")); } } }); } else { //容差值 预加载上下100像素内的图片 var phase = 100; $(document).on("scroll", function(e) { $(".J-lazd").each(function() { var $this = $(this); //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度 var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度 减去图片高度，上拉时也会点到图片就加载 var thisTop = parseInt($(window).scrollTop()) - parseInt($this.height()); var imgTop = parseInt($this.offset().top); if(imgTop >= thisTop - phase && imgTop <= thisButtomTop + phase && $this.attr("data-url") != $this.attr("src")) { //如果为空，src设置为data-src if($this.attr("data-src")) { $this.attr("src", $this.attr("data-src")); } else { $this.attr("data-src", $this.attr("src")); } } }); }); } } </script> </body> </html>