原生javascript代码懒加载
1.先定义需要懒加载的样式;
class="lazyload"
2.设置初始透明度为0.1;
.lazyload{
filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1;
}
3.把真正需要加载的真实地址放在data-src属性中;
src="懒加载图片.png" data-src="真实图片";
4.
前端开发周大伟同学JavaScript代码编写:
// 懒加载
function lazyLoad(){
if (window.addEventListener){
window.addEventListener("load",loading);
window.addEventListener("click",loading);
window.addEventListener("scroll",function(){
setTimeout(loading,100);
});
} else if (window.attachEvent) {
window.attachEvent("onload",loading);
window.attachEvent("onclick",loading);
window.attachEvent("onscroll",function(){
setTimeout(loading,100);
});
}
}
function loading(){
var lazyload=document.getElementsByClassName("lazyload");
for(var i=0;i<lazyload.length;i++){
var _this=lazyload[i];
var clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
if(clientHeight+scrollTop>=offsetTop(_this)){
_this.setAttribute("src",_this.getAttribute("data-src"));
_this.style.opacity=1;
}
}
}
//获取offsetTop和offsetLeft值的js代码(兼容)
function offsetTop( elements ){
var top = elements.offsetTop;
var parent = elements.offsetParent;
while( parent != null ){
top += parent.offsetTop;
parent = parent.offsetParent;
};
return top;
};
原生javascript代码懒加载的更多相关文章
- js, javascript 图片懒加载 实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- 001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
- 原生js实现懒加载并节流
像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费.采用懒加载技术,即用户浏览到哪儿,就加载该处的图片.这样节省网络资源.提升用户体验.减少服务器压力. 方法1: ...
- Javascript图片懒加载
懒加载的意义 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 懒加载的实现 1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟. 2.第二种是条 ...
- js学习之原生js实现懒加载
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript——图片懒加载
前言 有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~ github | https://github.com/wangyang0210/bky/tree/picLoadLazy 内容 ...
- 抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术
懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...
- Chrome 75 将原生支持图片懒加载
4 月 6 日,Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 load ...
随机推荐
- Codeforces Round #503 (by SIS, Div. 2) E. Sergey's problem
E. Sergey's problem [题目描述] 给出一个n个点m条边的有向图,需要找到一个集合使得1.集合中的各点之间无无边相连2.集合外的点到集合内的点的最小距离小于等于2. [算法] 官方题 ...
- spring cloud zuul过滤器修改requestURI 忽略大小写
通过zuul网关处理requestURI可以做很多事情,如对uri的解密,转发,大小写转化等. 这里对URI做一个简单的大小写的转化. 写一个filter实现ZuulFilter: package c ...
- 检验Excel中数据是否与数据库中数据重复
#region 记录Excel中的重复列 /// <summary> /// 记录Excel中的重复列 /// </summary> /// <param name=&q ...
- JS调用PageMethods
http://www.cnblogs.com/Ren_Lei/archive/2010/07/14/1777413.html JS调用PageMethods 操作步骤: 1.新建一个WebApplic ...
- vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ...
vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ...
- web.xml文件头声明各个版本参考
Servlet 3.1 Java EE 7 XML schema, namespace is http://xmlns.jcp.org/xml/ns/javaee/ <web-app xmlns ...
- Java JPA设置默认值、Timestamp设置、自动获取时间
设置默认值 @Column(name="state",columnDefinition="tinyint default 0") private Integer ...
- 如何学习ios(摘自知乎https://www.zhihu.com/question/20016551)
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Wang Hailong链接:https://www.zhihu.com/question/20016551/answer/1 ...
- quartz的学习和简单使用
以前在框架中使用过,很多都是纯粹的复制粘贴,了解过用法知道如何配置,但时间久了就没什么印象了,现在重新捡起来,再次进行学习. quartz相关的介绍都已经很多了,我就不重复啰嗦,简单说一下个人的认识和 ...
- R语言parse函数与eval函数的字符串转命令行及执行操作
parse()函数能将字符串转换为表达式expression:eval()函数能对表达式求解 A <- : B <- 'print(A)' class(B) C <- parse(t ...