懒加载技术(简称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. odoo开发笔记-- 按钮动作跳转到其他列表视图默认搜索

    按钮动作跳转到其他列表视图 按照默认指定的条件搜索显示. 效果: 实现方式:

  2. 解决Maven的Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart

    eclipse配置好了Maven,创建maven-archetype-quickstart项目报错如下: Could not resolve archetype org.apache.maven.ar ...

  3. 了解fortran语言

    最近看了一些文献,发现用了Fortran语言编程,并且还是近几年的,了解了之后才知道,其实Fortran已经慢慢没有人再用了,之所有还有一批人在用,极大可能是历史遗留问题吧.而这,也得从Fortran ...

  4. C++：复制构造函数

    关于复制构造函数的具体细节:浅层复制和深层复制等可以看下 范磊老师的<零起点学通C++>视频教程和<C++ Primer Plus>一书. 相信看完后,对复制构造函数能基本掌握 ...

  5. 全网最详细的Windows系统里Oracle 11g R2 Database（64bit）的完全卸载（图文详解）

    不多说,直接上干货! 前期博客 全网最详细的Windows系统里Oracle 11g R2 Database(64bit)的下载与安装(图文详解) 若你不想用了,则可安全卸载. 完全卸载Oracle ...

  6. Linux-(type,vim)

    type命令 1．命令格式: type [参数][命令] 2．命令功能: 使用 type 命令轻松找出给定的命令是否是别名.shell 内置命令.文件.函数或关键字.也可以找到命令的实际路径. 3．命 ...

  7. linux查看系统的硬件信息【转】

    linux查看系统的硬件信息,并不像windows那么直观,这里我罗列了查看系统信息的实用命令,并做了分类,实例解说. cpu lscpu命令,查看的是cpu的统计信息. blue@blue-pc:~ ...

  8. 最短路径算法----floyd（转）

    一.Floyd算法 假设从i到j的最短路径上要经过若干个顶点,这些中间顶点中最大的顶点编号为k,最小的顶点为t,因此要求算dist[i][j]的最小值,那么只需要求算dist[i][s]+dist[s ...

  9. KMP算法中next数组的理解与算法的实现（java语言）

    KMP 算法我们有写好的函数帮我们计算 Next 数组的值和 Nextval 数组的值,但是如果是考试,那就只能自己来手算这两个数组了,这里分享一下我的计算方法吧. 计算前缀 Next[i] 的值: ...

  10. 安装mysql时报Missing required library libcc.dll 126

    Missing required library libcc.dll 126 安装一个Cygwin就好了