javascript原生图片懒加载
2024-09-03 06:34:55
一,原生javascript图片懒加载
1. 使用方法,例如
// 要绑定的图片地址
<img data-src={url} alt=" ">
2. 在页面中引入下列原生javascript代码
var Lazy = {
"Img": null,
"getY": function(b) {
var a = 0;
if (b && b.offsetParent) while (b.offsetParent) a += b.offsetTop, b = b.offsetParent; else b && b.y && (a += b.y);
return a;
},
"getX": function(b) {
var a = 0;
if (b && b.offsetParent) while (b.offsetParent) a += b.offsetLeft, b = b.offsetParent; else b && b.x && (a += b.X);
return a;
},
"scrollY": function() {
var a = document.documentElement;
return self.pageYOffset || a && a.scrollTop || document.body.scrollTop || 0;
},
"scrollX": function() {
var a = document.documentElement;
return self.pageXOffset || a && a.scrollLeft || document.body.scrollLeft || 0;
},
"windowWidth": function() {
var a = document.documentElement;
return self.innerWidth || a && a.clientWidth || document.body.clientWidth;
},
"windowHeight": function() {
var a = document.documentElement;
return self.innerHeight || a && a.clientHeight || document.body.clientHeight;
},
"CurrentHeight": function() {
return Lazy.scrollY() + Lazy.windowHeight();
},
"CurrentWidth": function() {
return Lazy.scrollX() + Lazy.windowWidth();
},
"Load": function(d) {
Lazy.Init();
var f = Lazy.CurrentHeight(), b = Lazy.CurrentWidth();
for (_index = 0; _index < Lazy.Img.length; _index++) {
var a = Lazy.Img[_index];
$(a).attr("lazy") == undefined && $(a).attr("lazy", "n");
if ($(a).attr("lazy") == "y") continue;
/*$(a).bind("error", function() {
this.id == "subject" ? $(this).attr("src", "") : $(this).attr("src", "http://wap.cmread.com/rbc/p/content/repository/ues/image/s109/nopic.png");
});*/
if (d == undefined || d == "" || d == null) {
var c = Lazy.getY(a), e = Lazy.getX(a);
//e < b && c < f && (a.src = a.getAttribute("data-src"), $(a).attr("lazy", "y"), a.removeAttribute("data-src"));
c < f && (a.src = a.getAttribute("data-src"), $(a).attr("lazy", "y"), a.removeAttribute("data-src"));
$(a).attr("data-rel",e);
} else if (d == "x") {
var c = Lazy.getX(a);
c < b && (a.src = a.getAttribute("data-src"), $(a).attr("lazy", "y")); }
}
},
"Init": function() {
var a = document.querySelectorAll("img[data-src]");
Lazy.Img = a;
}
}; //为滚动轴绑定图片懒加载事件
document.onscroll = function(){Lazy.Load();};
setTimeout(function(){Lazy.Load();},100);//默认配置懒加载
最新文章
- 事件分发时候的onTouchEvent,onInterceptTouchEvent,dispatchTouchEvent调用顺序
- 2.Java基础之Runtime对象
- 也来说说C/C++里的volatile关键字
- CSS3径向渐变----大鱼吃小鱼之孤单的大鱼
- jquery datepicker 只显示年月
- js中正则表达式的模式匹配
- leetcode 235. Lowest Common Ancestor of a Binary Search Tree
- 微信封号浪潮再起 A货假代购还能在朋友圈泛滥多久?
- js中this对象,call,apply
- 安卓开发_深入学习ViewPager控件
- JS模板Handlebars的使用和有效组织
- 百度UEditor编辑器使用教程与使用方法
- 搭建hbase-0.94.26集群环境
- Android有关JNI 学习(两)为JNI方法名称,数据类型和方法签名的一些知识
- ios做的两个矩形相交叉
- postfix中recipient/client/sender/helo四者的区别<;转载>;
- 英语词汇周计划(1-1)group 1
- js 实现 复制 功能 (zeroclipboard)
- linux下tomcat启动很慢的解决办法
- C++中cin.getline与cin.get要注意的地方