<!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. erlang实现一个进程池 pool

    erlang的实现一个简单的进程池. erlang进程是非常轻量级的,这个进程池的主要目的是用一种通用的方式去管理和限制系统中运行的资源占用.当运行的工作者进程数量达到上限,进程池还可以把任务放到队列 ...

  2. 【BZOJ3333】排队计划 树状数组+线段树

    [BZOJ3333]排队计划 Description Input Output Sample Input 6 2 160 163 164 161 167 160 2 3 Sample Output 6 ...

  3. Gone Fishing(贪心)

    Gone Fishing John is going on a fising trip. He has h hours available (1 ≤ h ≤ 16), and there are n ...

  4. zoj 2362 Beloved Sons【二分匹配】

    题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2361 来源:http://acm.hust.edu.cn/vjudg ...

  5. 【python】-- 面向对象引子、概念

    面向过程编程 1.编程范式 编程是 程序 员 用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马 ...

  6. 【译】Stackoverflow：Java Servlet 工作原理问答

    导读 本文来自stackoverflow的问答,讨论了Java Servlet的工作机制,如何进行实例化.共享变量和多线程处理. 问题:Servlet 是如何工作的?Servlet 如何实例化.共享变 ...

  7. 【翻译自mos文章】在重建控制文件之前应该考虑的事情

    在重建控制文件之前应该考虑的事情 来源于: Things to Consider Before Recreating the Controlfile (文档 ID 1475632.1) 适用于: Or ...

  8. python-安装 pip

    https://pip.pypa.io/en/stable/installing/ wget https://bootstrap.pypa.io/get-pip.py python get-pip.p ...

  9. nginx-gridfs的安装

    mongodb中gridfs适合存放视频和高清图片等等超大文件(小的文件建议不要存在mongodb中): 下面是在centos下配置nginx来訪问mongodb中的mp4文件: 1:安装nginx- ...

  10. ABAP文件选择框函数

    因为WS_FILENAME_GET已经被废弃所以使用接口CL_GUI_FRONTEND_SERVICES来实现本地文件的选择. 用接口类CL_GUI_FRONTEND_SERVICES实现的方法 CA ...