首页 > 代码库 > lazyload
lazyload
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div style="width:100px; height:3000px"></div> <div id="div1" style="width:50px; height:50px; background:red; position:absolute; top:1000px"></div><div id="div2" style="width:50px; height:50px; background:blue; position:absolute; top:2500px"> </div> <script type="text/javascript"> // 返回浏览器的可视区域位置 function getClient() { var l, t, w, h; l = document.documentElement.scrollLeft || document.body.scrollLeft; t = document.documentElement.scrollTop || document.body.scrollTop; w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; return { left: l, top: t, width: w, height: h };}// 返回待加载资源位置 function getSubClient(p) { var l = 0, t = 0, w, h; w = p.offsetWidth; h = p.offsetHeight; while (p.offsetParent) { l += p.offsetLeft; t += p.offsetTop; p = p.offsetParent; } return { left: l, top: t, width: w, height: h };}// 判断两个矩形是否相交,返回一个布尔值 function intens(rec1, rec2) { var lc1, lc2, tc1, tc2, w1, h1; lc1 = rec1.left + rec1.width / 2; lc2 = rec2.left + rec2.width / 2; tc1 = rec1.top + rec1.height / 2; tc2 = rec2.top + rec2.height / 2; w1 = (rec1.width + rec2.width) / 2; h1 = (rec1.height + rec2.height) / 2; return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1;}// 比较某个子区域是否呈现在浏览器区域 function jiance(arr, prec1, callback) { var prec2; for (var i = arr.length - 1; i >= 0; i--) { if (arr[i]) { prec2 = getSubClient(arr[i]); if (intens(prec1, prec2)) { callback(arr[i]); // 加载资源后，删除监测 delete arr[i]; } } }}// 检测目标对象是否出现在客户区 function autocheck(arr) { var prec1 = getClient(); jiance(arr, prec1, function(obj) { // 加载资源... alert(obj.innerHTML); }) } // 子区域一 var d1 = document.getElementById("div1");// 子区域二 var d2 = document.getElementById("div2");// 需要按需加载区域集合 var arr = [d1, d2];window.onscroll = function() { // 重新计算 autocheck(arr);}window.onresize = function() { // 重新计算 autocheck(arr);} </script></body></html>
lazyload
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。