懒加载技术(简称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. 【sping揭秘】5、IOC容器（一）

    OC容器实现过程 1. 容器启动阶段,读取配置文件,解析文件BeanDefinitionReader 2. Bean 实例化阶段 关于BeanFactoryPostProcessor 插手spring ...

  2. 【并发】3、LockSupport阻塞与唤醒，相较与wait和notify

    我们可以使用wait和notify分别对象线程进行阻塞或者唤醒,但是我们也可以使用LockSupport实现一样的功能,并且在实际使用的时候,个人感觉LockSupport会更加顺手 范例1,wait ...

  3. 【原创】实现一个简单的邮件服务API

    经常在公司写一些内部小程序需要用到发邮件的功能,于是决定写一个邮件服务. 实现思路:以URL形式提供一个RESTful API 给客户端,客户端通过post请求把json格式的邮件信息发送到服务端,服 ...

  4. 课程三(Structuring Machine Learning Projects)，第一周（ML strategy（1）） —— 1.Machine learning Flight simulator:Bird recognition in the city of Peacetopia (case study)

    []To help you practice strategies for machine learning, the following exercise will present an in-de ...

  5. Android通用简洁的下载器

    下载逻辑在android开发中可谓很常见,那么封装一个通用简洁的下载器时很有必要的.如果不想给工程引入一个很重的jar包那么可以直接复用下面的代码即可. 主要对外接口 构造函数 :     publi ...

  6. MySQL 分组之后如何统计记录条数 gourp by 之后的 count()

    SELECT count(*) FROM 表名 WHERE 条件 // 这样查出来的是总记录条 SELECT count(*) FROM 表名 WHERE 条件 GROUP BY id //这样统计的 ...

  7. elasticSearch6源码分析(9)ActionModule

    1.ActionModule概述 /** * Builds and binds the generic action map, all {@link TransportAction}s, and {@ ...

  8. C# Azure-让http自动跳转到https链接

    在项目的web.config下面加上下面的配置: <rewrite> <rules> <clear /> <rule name="Redirect ...

  9. 联想拯救者ISK代开BIOS的方法

    按f几都没用,摁fn+f几也不会有用,ISK需要使用物理疗法

  10. ASP.NET C# List分页

    List.Skip((pagecount-1)*pagesize).Take(pagesize) 假设你每页10条数据当前是第3页 跳到第4页则:List.Skip((4-1)*10).Take(10 ...