原生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 ...
随机推荐
- iconv编码转换报错问题
今天,再由ISO-8859编码格式转化为UTF-8格式过程中,出现报错:iconv: 未知 10304 处的非法输入序列. 问题分析:ISO-8859是英文格式的编码方式,不支持中文,为了解决中文支持 ...
- docker下部署kafka集群(多个broker+多个zookeeper)
网上关于kafka集群的搭建,基本是单个broker和单个zookeeper,测试研究的意义不大.于是折腾了下,终于把正宗的Kafka集群搭建出来了,在折腾中遇到了很多坑,后续有时间再专门整理份搭建问 ...
- 0ctf 2017 kernel pwn knote write up
UAF due to using hlist_add_behind() without checking. There is a pair locker(mutex_lock) at delete_n ...
- mktemp - 产生唯一的临时文件名
总览 (SYNOPSIS) mktemp [-q ] [-u ] template 描述 (DESCRIPTION) mktemp 根据 给定的 文件名模板, 改变 其中的 一部分, 从而 生成 临时 ...
- CentOS 7 环境下部署 SVN 并实现自动更新(版本库放在Tomcat下)
1.安装 SVN 1.1先检查是否有安装 svn rpm -qa subversion #没有什么显示就说明没有安装过yum remove subversion #如果有安装就运行删除老版本yum i ...
- 03python面向对象编程2
3.继承 如果你要编写的类是另一个现成类的特殊版本,可使用继承.一个类继承另一个类时,它将自动获得另一个类的所有属性和方法:原有的类称为父类,而新类称为子类.子类继承了其父类的所有属性和方法,同时还可 ...
- 03javascript01
1.javascript语法体系 1)EMCA基础语法(统一) 2)BOM编程(不统一) 3)DOM编程(不统一) 1.1 javascript使用 <!DOCTYPE html> < ...
- 09java进阶——IO
1.File类 1.1目录及路径分隔符 package cn.jxufe.java.chapter09.demo01; import java.io.File; public class Test01 ...
- Python核心技术与实战——四|Python黑箱:输入与输出
抽象的看,Python程序可以被看成一个黑箱:通过输入流将数据送达,经过处理后在输入,也就是说具备了一个图灵机运作的必要条件. 输入输出基础 最简单的输入是来自键盘的操作 name = input(' ...
- python request.args 解析
requst.args 获得的是 列表类型原始 aa=ff&&bb=gg 通过request.args 分解为 ImmutableMultiDict([('page', u'10')] ...