懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载

　　涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源，让用户等待太久，

　　来，举个栗子，当你去东哥的绿帽网网购的时候，打开首页的时候，直接在导航栏选了商品种类跳转到了列表页，那首页下方那些未显示的区域的图片需不需要加载，当然不需要了，你根本没看他们，加载出来干啥

　　说白了就是占着茅坑不拉粑粑，那我们怎么解决呢，这时我们就该用到懒加载技术，只有当这部分图片出现在可视区内再去请求服务器。

　　懒加载的核心：在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)

　　下面来一个大栗子

　　来，把朕的代码例子呈上来

　　

　　例子的思路：页面渲染时将src路径放到自定义属性中去，这样页面加载时图片就不会去请求服务器，当图片滚动到可视区内时，获取它的自定义属性并赋值给src

　　这是页面的布局，图片路径注意改一下子

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin:0;padding:0;}

        img{

            width: 200px;

            height: 200px;

            display: block;

            float: left;

        }

    </style>

</head>

<body>

    <img src="" data-url ="img/1.jpg">

    <img src="" data-url ="img/2.jpg">

    <img src="" data-url ="img/3.jpg">

    <img src="" data-url ="img/4.jpg">

    <img src="" data-url ="img/5.jpg">

    <img src="" data-url ="img/6.jpg">

    <img src="" data-url ="img/7.jpg">

    <img src="" data-url ="img/8.jpg">

    <img src="" data-url ="img/9.jpg">

    <img src="" data-url ="img/10.jpg">

    <img src="" data-url ="img/1.jpg">

    <img src="" data-url ="img/2.jpg">

    <img src="" data-url ="img/3.jpg">

    <img src="" data-url ="img/4.jpg">

    <img src="" data-url ="img/5.jpg">

    <img src="" data-url ="img/6.jpg">

    <img src="" data-url ="img/7.jpg">

    <img src="" data-url ="img/8.jpg">

    <img src="" data-url ="img/9.jpg">

    <img src="" data-url ="img/10.jpg">

    <img src="" data-url ="img/1.jpg">

    <img src="" data-url ="img/2.jpg">

    <img src="" data-url ="img/3.jpg">

    <img src="" data-url ="img/4.jpg">

    <img src="" data-url ="img/5.jpg">

    <img src="" data-url ="img/6.jpg">

    <img src="" data-url ="img/7.jpg">

    <img src="" data-url ="img/8.jpg">

    <img src="" data-url ="img/9.jpg">

    <img src="" data-url ="img/10.jpg">

    <img src="" data-url ="img/1.jpg">

    <img src="" data-url ="img/2.jpg">

    <img src="" data-url ="img/3.jpg">

    <img src="" data-url ="img/4.jpg">

    <img src="" data-url ="img/5.jpg">

    <img src="" data-url ="img/6.jpg">

    <img src="" data-url ="img/7.jpg">

    <img src="" data-url ="img/8.jpg">

    <img src="" data-url ="img/9.jpg">

    <img src="" data-url ="img/10.jpg">

　　来 上关键的JS代码

<script>

    //页面加载时先调用一次loadImg函数

    loadImg()

    //添加滚动事件

    window.onscroll = function () {

        loadImg()

    }

    function loadImg() {

        var iH = document.documentElement.clientHeight;

        var t = document.documentElement.scrollTop || document.body.scrollTop;

        var img = document.getElementsByTagName("img");

        for (var i = 0; i < img.length; i++) {

            if ((!img[i].bstop) && offsetTop1(img[i]) < (iH + t)) {

                //注意  真正在页面上使用一定要加开关,不加开关每次条件符合时都会重新请求服务器，还不如不用懒加载

                //理解不了啥意思的同学，可以把img[i].bstop删去试试

                //同时不要用offsetTop

                //因为offsetTop是获取离已定位的父元素的top值

                //所以自己封装一个计算offsetTop的函数

                var src = img[i].getAttribute("data-url");

                img[i].src = src;

                img[i].bstop = true;

                console.log(1)

            }

        }

    }

    //封装获取元素离上方的高度的函数

    function offsetTop1(obj) {

        var t = obj.offsetTop;

        while (obj.offsetparent) {

            obj = obj.offsetparent;

            t = t + obj.offsetTop;

        }

        return t;

    }

</script>

JS里面的懒加载(lazyload)的更多相关文章

  1. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  2. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  3. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  4. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  5. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  6. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  7. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  8. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  9. 懒加载lazyload

    什么是懒加载 懒加载就是当你做滚动到页面某个位置,然后再显示当前位置的图片,这样做可以减少页面请求. 懒加载:主要目的是作为服务器前端的优化,减少请求数或延迟请求数,一些图片非常多的网站中非常有用,在 ...

随机推荐

  1. day 73 初学vue (1)

    前情提要: vue 框架的初学习, 主要是,指令,属性,函数,计算属性,监听属性,钩子,生命周期,过滤器,阻止事件和综合案例todo list 学习准备,感谢学习资源: vue 官网:https:// ...

  2. WebDriver高级应用实例（3）

    3.1自动化下载某个文件 被测网页的网址: https://pypi.org/project/selenium/#files Java语言版本的API实例代码 import java.util.Has ...

  3. iframe 跨域调用父级方法的方案

    一.如果高层域名相同的话,可以通过document.domain来实现跨域访问 例如: 父级域名:localhost:8080 子级域名:localhost:9090 那么可以设置document.d ...

  4. webgl介绍

    一.webgl与three.js 我们知道canvas.svg等是2D绘图的,那么如果想要使用js进行3D绘图,可以吗? 答案是肯定的!实际上主流的3D开发使用的是c++,但是随着技术的发展,Java ...

  5. Git 的4个阶段的撤销更改

    虽然git诞生距今已有12年之久,网上各种关于git的介绍文章数不胜数,但是依然有很多人(包括我自己在内)对于它的功能不能完全掌握.以下的介绍只是基于我个人对于git的理解,并且可能生编硬造了一些不完 ...

  6. redis集群环境的搭建和错误分析

    redis集群环境的搭建和错误分析 redis集群时,出现的几个异常问题 09 redis集群的搭建 以及遇到的问题

  7. Semaphore 信号量

    一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可.每个 release() 添加一个许可,从而可能释放一个正在阻塞的获取者. ...

  8. 熟悉DAO模式的用法

    今天主要是使用DAO模式. DAO模式通过对业务层提供数据抽象层接口,实现了以下目标: 1. 数据存储逻辑的分离 通过对数据访问逻辑进行抽象,为上层机构提供抽象化的数据访问接口.业务层无需关心具体的s ...

  9. JavaScript时间操作工具类

    /** * 时间操作工具类 * * @author zwq * */ var TimeFrameUtil = { /** * 格式化日期 * @param date {Date} 日期 * @para ...

  10. spring boot整合双持久层框架jpa、mybatis

    公司之前用的是spring boot + jpa,但由于jpa无法完美的解决某些动态查询问题,就使用的jdbcTemplate 动态封装SQL,由于代码相对复杂,可读性差,现准备再引入mybatis. ...