懒加载技术(简称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. D15——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍 层叠样式表 ...

  2. 解释一下核主成分分析(Kernel Principal Component Analysis, KPCA)的公式推导过程（转载）

    KPCA,中文名称”核主成分分析“,是对PCA算法的非线性扩展,言外之意,PCA是线性的,其对于非线性数据往往显得无能为力,例如,不同人之间的人脸图像,肯定存在非线性关系,自己做的基于ORL数据集的实 ...

  3. Scanner的概述与String类的构造和使用_DAY12

    1:Scanner的概述(理解) 1)Scanner是JDK5以后出现的方便我们从键盘接受数据的类. 2)Scanner的构造格式: Scanner sc = new Scanner(System.i ...

  4. 一、Linq简介

    语言集成查询Language Integrated Query(LINQ)是一系列将查询功能集成到C#语言的技术统称. 传统数据查询的缺点: 简单的字符串查询,没有编译时类型检查或Intellisen ...

  5. Attr类中进行类型推断

    涉及到重要的类的继承关系如下图所示. 关于抛出的异常继承体系:

  6. php -- 数据库信息

    ----- 023-dbinfo.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  7. TCP保活的必要性

    TCP的长连接理论上只要连接建立后,就会一直保持着.但有时有一些防火墙之类的软件会自动检查主机的网络连接状况,比如说如果发现某个连接在几分钟之内都没有数据通讯,则会关闭这个连接.有时客户端与服务器需要 ...

  8. spring boot 与 自定义interceptor

    前面学习过过滤器, 但是过滤器是针对servlet的, 用在springmvc和spring boot里面, 功能上, 感觉并不是很好用. 那这里来学习一下拦截器. 一. 拦截器的执行顺序 1. 目录 ...

  9. Percona XtraDB Cluster

    简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1.同步复制,事务要么在所有节点提交或不提交. ...

  10. ElasticSearch 学习记录之Text keyword 两种基本类型区别

    ElasticSearch 系列文章 1 ES 入门之一 安装ElasticSearcha 2 ES 记录之如何创建一个索引映射 3 ElasticSearch 学习记录之Text keyword 两 ...