用jquery写的图片懒加载
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jquery-1.12.3.min.js"></script> <style type="text/css"> img{ width: 100%;height:500px; border-bottom: 1px solid black; } </style> </head> <body> <img class="lazy" data-src="1.jpg"> <img class="lazy" data-src="2.jpg"> <img class="lazy" data-src="3.jpg"> <img class="lazy" data-src="4.jpg"> <img class="lazy" data-src="5.jpg"> <img class="lazy" data-src="6.jpg"> <img class="lazy" data-src="7.jpg"> <img class="lazy" data-src="8.jpg"> <img class="lazy" data-src="9.jpg"> <img class="lazy" data-src="10.jpg"> <img class="lazy" data-src="11.jpg"> <img class="lazy" data-src="12.jpg"> <img class="lazy" data-src="13.jpg"> <script type="text/javascript"> lazy() $(window).scroll(function(event){ lazy() }) function lazy(){ var juli=$(window).scrollTop()+$(window).height(); $.each($('.lazy'),function(){ var hei=$(this).offset().top+300; console.log(hei<juli) if(hei<juli){ $(this).attr('src',$(this).data('src')); $(this).removeClass('lazy'); } }) } </script> </body> </html>
请爱好前端技术的朋友,联系我,有问题大家一起讨论