图片懒加载

来源：互联网发布：网站美工设计培训编辑：程序博客网时间：2024/05/19 02:39

Java代码  
图片懒加载，首屏（目测浏览器最大化窗口时的可见范围）可见区域以外的所有图片使用懒加载，即在滚动页面的时候才自动获取图片，实现方法为采用修改img标签的src属性为src3或src4，阻止图片的加载。  

Javascript代码  
<html>  
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="./common_lazyload.js"></script>  
<body id="index">  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>     
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>     
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>     
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>     
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>     
<img src3="./gw.jpg"/><p>  
<img src3="./gw.jpg"/><p>     
</body>  
</html>  

common_lazyload.js

//懒加载function lazyload(option) {var settings = {defObj : null,defHeight : 0};settings = $.extend(settings, option || {});var defObj = (typeof settings.defObj == "object")? settings.defObj.find("img"): $(settings.defObj).find("img");var pageTop = function() {var d = document, y = (navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad")? window.pageYOffset: Math.max(d.documentElement.scrollTop, d.body.scrollTop);return d.documentElement.clientHeight + y - settings.defHeight;};var imgLoad = function() {defObj.each(function() {if ($(this).offset().top <= pageTop()) {var src3 = $(this).attr("src3");if (src3) {$(this).attr("src", src3).removeAttr("src3");}}});};imgLoad();$(window).bind("scroll", function() {imgLoad();});}$(document).ready(function() {//懒加载lazyload({defObj : "#index"});});

转载于：http://dengli19881102.iteye.com/blog/1756528

0 0