<!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 给用户修改权限

    #添加一个用户 useradd xiaoming #设置密码 passwd xiaoming 回程 //设置密码就行了 #把用户修改成root权限 vi /etc/passwd #找到xiaoming ...

  2. Ubuntu下VirtualBox虚拟机与主机机互相ping通的简单配置心得

    virtualbox 是个非常优秀的软件,通常与主机之间有3种方式,Bridged方式,NAT方式,host-only方式,安装的默认方式是NAT,可是这样的方式在virtualbox虚拟机下有个缺点 ...

  3. jqury 如何获取 kindeditor 中textarea 的值

    获取文本内容,可是的创建时怎么也不能获取,利用FF的firebug查看到自己所写的内容在一个iframe中,于是想从iframe中获取文本,想要用 $(“ifame”).html();获取内容,可是依 ...

  4. Linux进程间通信(一) - 管道

    管道(pipe) 普通的Linux shell都允许重定向,而重定向使用的就是管道. 例如:ps | grep vsftpd .管道是单向的.先进先出的.无结构的.固定大小的字节流,它把一个进程的标准 ...

  5. 执行cp命令时提示cp: 略过目录

    执行cp命令时提示cp: 略过目录 加入-r之后成功拷贝 在网上search了一下CP命令的用法: CP命令 该命令的功能是将给出的文件或目录拷贝到另一文件或目录中,同MSDOS下的copy命令一样, ...

  6. 1. lvs+keepalived 高可用群集

    一. keepalived 工具介绍 1.专为lvs 和HA 设计的一款健康检查工具 2.支持故障自动切换 3.支持节点健康状态检查 二.  keepalived 实现原理剖析 keepalived ...

  7. J - Max Sum

    J - Max Sum Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descrip ...

  8. 配置过滤器filter对跨站脚本攻击XSS实现拦截

    1.web.xml中配置filter [html] view plain copy   <filter> <filter-name></filter-name> & ...

  9. 九度OJ 1190：大整数排序 （大数运算、排序）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3219 解决:1467 题目描述: 对N个长度最长可达到1000的数进行排序. 输入: 输入第一行为一个整数N,(1<=N<=1 ...

  10. PHP计算多少秒/分/时/天/周/月/年之前 : timeago

    function timeago( $ptime ) { $etime = time() - $ptime; if ($etime < 59) return '刚刚'; $interval = ...