<!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. Visual Studio的 Apache Cordova 插件CTP3.0发布！

    北京时间12号晚23点开始的Connect()活动上,微软发布了一系列激动人心的消息! .NET开源了!以后.NET将可在Linux和Mac OS平台上运行! VS免费了!!如果你是学生,个人开发者, ...

  2. sublime使用技巧（2）-- 实用插件推荐【持续更新】

    1.Auto semicolon 在括号内输入分号,会自动把光标移到行尾然后再输入分号. 2.DocBlockr 补全注析格式,例如在函数上面输入/** + Enter,就会自动补全函数的注析说明. ...

  3. MDwiki 调研

    下载解压 然后 mv mdwiki.html index.html 创建 一个index.md 然后就可以直接访问http://example.com/ 直接把你的md文件放在目录里面就可以了 cer ...

  4. 多媒体开发之---H264 RTSP交互过程

    OPTIONS rtsp://192.168.1.154:8557/h264 RTSP/1.0 CSeq: 1 User-Agent: VLC media player (LIVE555 Stream ...

  5. ios -富文本和尺寸

    /** *  计算文本的宽高 方法 2 * *  @param str     需要计算的文本 *  @param font    文本显示的字体 *  @param maxSize 文本显示的范围 ...

  6. DBCP组件概述

    许多Apache的项目都支持与关系型数据库进行交互.为每个用户都创建一个连接是一项非常耗时的工作(通常情况下,需要花费几秒中),而为了执行数据库的事务处理可能还需要花费几毫秒.对于一个对外公开访问的互 ...

  7. 【BZOJ4769】超级贞鱼 归并排序求逆序对

    [BZOJ4769]超级贞鱼 Description 马达加斯加贞鱼是一种神奇的双脚贞鱼,它们把自己的智慧写在脚上——每只贞鱼的左脚和右脚上各有一个数.有一天,K只贞鱼兴致来潮,排成一列,从左到右第i ...

  8. 【BZOJ3060】[Poi2012]Tour de Byteotia 并查集

    [BZOJ3060][Poi2012]Tour de Byteotia Description 给定一个n个点m条边的无向图,问最少删掉多少条边能使得编号小于等于k的点都不在环上. Input     ...

  9. Java防止XSS攻击

    方法一:转义存储:添加XssFilter 1.在web.xml添加过滤器: <!-- 解决xss漏洞 --> <filter> <filter-name>xssFi ...

  10. java Filter的简单使用

    java web中的过滤器的简单使用.直接上代码.1.web.xml <?xml version="1.0" encoding="UTF-8"?> ...