<!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. 详细的linux目录结构详细介绍

    详细的linux目录结构详细介绍 --树状目录结构图 下面红色字体为比较重要的目录 1./目录 目录 描述 / 第一层次结构的根,整个文件系统层次结构的根目录 /bin/ 需要在单用户模式可用的必要命 ...

  2. java 性能检测工具 检测死锁等

    死锁检测方法 1 JConsole 找到需要查看的进程,打开线程选项卡,点击检测死锁 2 jps查看java进程ID,使用jstack  7412输出信息 3 使用jvisualvm连接java虚拟机 ...

  3. PHPstudy如何在本地搭建多站点

    参考地址: http://jingyan.baidu.com/article/e52e36154227ef40c70c5147.html

  4. double,long double及各变量数组内存开销

    IEEE754浮点数的表示方法.C语言里对float类型数据的表示范围为-3.4*10^38-+3.4*10^38.double为-1.7*10^-308~1.7*10^308,long double ...

  5. Arrays类--Arrays.asList()方法使用

    java.util类 Arrays java.lang.Object——java.util.Arrays public class Arrays extends Object 此类包含用来操作数组(比 ...

  6. 【python】-- 列表

    Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推 列表 1.定义列表,取出列表中的值 names = [] #定义空列表 ...

  7. 我的Android进阶之旅------>Android基于HTTP协议的多线程断点下载器的实现

    一.首先写这篇文章之前,要了解实现该Android多线程断点下载器的几个知识点 1.多线程下载的原理,如下图所示 注意:由于Android移动设备和PC机的处理器还是不能相比,所以开辟的子线程建议不要 ...

  8. Latex: Expression under summation on multiple lines

    Purpose Describe the sum symbol like this: zebk=1Nk∑i∈Rkj∈W(i)∩Rkmax(fi−fj) Solution code z_{ebk}=\f ...

  9. 通过GPRS将GPS数据上传到OneNet流程

    AT OK AT+CGCLASS="B" OK AT+CGDCONT=1,"IP","CMNET" OK AT+CGATT=1 OK AT+ ...

  10. Linux 下 Crontab 命令使用详解 定时任务

    一.  Crontab 介绍 crontab命令的功能是在一定的时间间隔调度一些命令的运行. 1.1 /etc/crontab 文件 在/etc文件夹下有一个crontab文件,这里存放有系统运行的一 ...