<!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. rsync的介绍及参数详解，配置步骤，工作模式介绍

    rsync的介绍及参数详解,配置步骤,工作模式介绍 rsync是类unix系统下的数据镜像备份工具.它是快速增量备份.全量备份工具. Sync可以远程同步,支持本地复制,或者与其他SSH.rsync主 ...

  2. Android自定义action与permission!!! (转)

    原文地址:http://blog.csdn.net/android_tutor/article/details/6310418#reply 大家好,今天给大家简单分享一下Android中自定义acti ...

  3. WPF 员工卡条形码

    大家都知道条形码(Barcode)是一种可以由机器识别的特殊编码,在生产.生活中也常常会见到并使用它.条形码的类型和种类很多感兴趣的朋友可以详细了解一下.其中Code 39 可以说是一种最为常见并广泛 ...

  4. linux php.ini又一次载入问题

    今天发现自己server改动php.ini之后无法又一次载入! .无法使用php-fpm reload,奇怪.! 后来查了一下.能够使用 /etc/init.d/php-fpm reload 来又一次 ...

  5. [luogu3359]改造异或树

    [luogu3359]改造异或树 luogu 和之前某道题类似只有删边的话考虑倒着加边 但是怎么统计答案呢? 我们考虑以任意点为根dfs一遍求出每个点到根的路径异或和s[i] 这样任意两点x,y的路径 ...

  6. Redis 配置和使用

    Redis的配置 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者me ...

  7. 丢失vcruntime140.dll

    我在php7安装yaf时报了标题所提示的错误信息. 解决方案是:下载vc++2015 并安装 链接如下:https://www.microsoft.com/zh-cn/download/confirm ...

  8. redis学习笔记 - Pipeline与事务

    原文 Redis提供了5种数据结构,但除此之外,Redis还提供了注入慢查询分析,Redis Shell.Pipeline.事务.与Lua脚本.Bitmaps.HyperLogLog.PubSub.G ...

  9. crontab定时任务写法记录

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  10. SVN代码merge

    如何merge代码?建议用命令搞merge,客户端图形界面不是很给力.SVN 1.5以上版本,可以使用SVN的自动合并:将主干合并到分支:进入分支目录,执行命令: svn merge http://s ...