<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         *{

             margin:0;

             padding:0;

         }

         img{

             width: 100%;

             height: 500px;

         }

     </style>

 </head>

 <body>

     <img asrc="1.jpg" alt="">

     <img asrc="2.jpg" alt="">

     <img asrc="3.jpg" alt="">

     <img asrc="4.jpg" alt="">

     <img asrc="5.jpg" alt="">

     <script>

         //document.body.scrollTop 滚动条高度

         //document.documentElement.clientHeight 网页可见区域高度

         var img=document.getElementsByTagName('img');

         function update(){//更新数据

             for (var i = 0; i < img.length; i++) {

             if(document.body.scrollTop+document.documentElement.clientHeight>img[i].offsetTop){

                     img[i].src=img[i].getAttribute('asrc');

                 }

             }

         }

         window.addEventListener('scroll',update)

         update();

     </script>

 </body>

 </html>

原生js图片懒加载特效的更多相关文章

  1. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  2. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

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

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

  4. 【前端优化】js图片懒加载及优化

    一.前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

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

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

  6. js图片懒加载（滚动加载）是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  7. js图片懒加载（滚动加载）判断是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

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

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

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

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

随机推荐

  1. Live555 中的客户端openRTSP 保存H264文件

    http://amitapba.blog.163.com/blog/static/20361020720140189239762/ http://amitapba.blog.163.com/blog/ ...

  2. thinkPHP5.0的学习研究【架构】

    2017年6月19日18:51:53 架构:1.ThinkPHP5.0应用基于MVC(模型-视图-控制器)的方式来组织.2.MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC ...

  3. PIL+百度aip

    1.PIL模块安装 选择PIL 官方没有支持python3.6的PIL库,所以用pillow代替 http://www.lfd.uci.edu/~gohlke/pythonlibs/#pillow 链 ...

  4. centOS6.2 最小安装下的无线网络配置

    一.安装wireless_tools,http://www.linuxfromscratch.org/blfs/view/svn/basicnet/wireless_tools.html 二.vi / ...

  5. c#中关于compare比较的一点注意事项

    一直没有太注意,今天发现在compare比较两个字符串的时候出了点小问题 如果我设置了两个字符串 一个是“2”,一个是“12” 那么在比较的时候 第一个会大于第二个: 如果第一个是“02”,第二个是“ ...

  6. Jmeter 02 JMeter体系结构

    1. Jmeter简介 2. Jmeter体系结构 3. Jmeter运行原理 4. Jmeter测试计划要素 5. Jmeter环境介绍 6. Jmeter与Loadrunner异同

  7. 【BZOJ4033】[HAOI2015]树上染色 树形DP

    [BZOJ4033][HAOI2015]树上染色 Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并将其他的N-K个点染 ...

  8. HBase核心技术点

    表的rowkey设计核心思想: 依据rowkey查询最快 对rowkey进行范围查询range 前缀匹配 预分区创建的三种方式 create 'ns1:t1', 'f1', SPLITS => ...

  9. oracle img 导入dmp文件

    1.新建表空间 因为我们导出的数据表的表空间不一定是USERS, 假如说是:FQDB 新建表空间SQL语句 create tablespace FQDB datafile 'c:\FQDB.dbf' ...

  10. java.util包下面的类---------01---示意图

    一直在使用util包下面的这些类,甚至有些没用过的,想要都去认识认识他们!也许在未来的一天可以用到! 图太大不好截图!部分没有截全!