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代码懒加载的更多相关文章

  1. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  3. 001_Chrome 76支持原生HTML 图片懒加载Lazy loading

    Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...

  4. 原生js实现懒加载并节流

    像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费.采用懒加载技术,即用户浏览到哪儿,就加载该处的图片.这样节省网络资源.提升用户体验.减少服务器压力. 方法1: ...

  5. Javascript图片懒加载

    懒加载的意义 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 懒加载的实现 1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟. 2.第二种是条 ...

  6. js学习之原生js实现懒加载

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. JavaScript——图片懒加载

    前言 有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~ github | https://github.com/wangyang0210/bky/tree/picLoadLazy 内容 ...

  8. 抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术

    懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...

  9. Chrome 75 将原生支持图片懒加载

    4 月 6 日,Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 load ...

随机推荐

  1. Codeforces Round #503 (by SIS, Div. 2) E. Sergey's problem

    E. Sergey's problem [题目描述] 给出一个n个点m条边的有向图,需要找到一个集合使得1.集合中的各点之间无无边相连2.集合外的点到集合内的点的最小距离小于等于2. [算法] 官方题 ...

  2. spring cloud zuul过滤器修改requestURI 忽略大小写

    通过zuul网关处理requestURI可以做很多事情,如对uri的解密,转发,大小写转化等. 这里对URI做一个简单的大小写的转化. 写一个filter实现ZuulFilter: package c ...

  3. 检验Excel中数据是否与数据库中数据重复

    #region 记录Excel中的重复列 /// <summary> /// 记录Excel中的重复列 /// </summary> /// <param name=&q ...

  4. JS调用PageMethods

    http://www.cnblogs.com/Ren_Lei/archive/2010/07/14/1777413.html JS调用PageMethods 操作步骤: 1.新建一个WebApplic ...

  5. vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ...

    vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ...

  6. web.xml文件头声明各个版本参考

    Servlet 3.1 Java EE 7 XML schema, namespace is http://xmlns.jcp.org/xml/ns/javaee/ <web-app xmlns ...

  7. Java JPA设置默认值、Timestamp设置、自动获取时间

    设置默认值 @Column(name="state",columnDefinition="tinyint default 0") private Integer ...

  8. 如何学习ios(摘自知乎https://www.zhihu.com/question/20016551)

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Wang Hailong链接:https://www.zhihu.com/question/20016551/answer/1 ...

  9. quartz的学习和简单使用

    以前在框架中使用过,很多都是纯粹的复制粘贴,了解过用法知道如何配置,但时间久了就没什么印象了,现在重新捡起来,再次进行学习. quartz相关的介绍都已经很多了,我就不重复啰嗦,简单说一下个人的认识和 ...

  10. R语言parse函数与eval函数的字符串转命令行及执行操作

    parse()函数能将字符串转换为表达式expression:eval()函数能对表达式求解 A <- : B <- 'print(A)' class(B) C <- parse(t ...