懒加载技术(简称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. Java - 阅读与查找

    WebSites http://www.importnew.com/ https://www.java-tips.org/ http://www.javaworld.com/ http://www.p ...

  2. iOS-【最新】跳转到 App Store 评分

    APP应用内 App Store 跳转评分 NSString *itunesurl = @"itms-apps://itunes.apple.com/cn/app/id你的APPid?mt= ...

  3. POJ 2583

    #include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...

  4. C# SqlHelper类的数据库操作

    #region 私有构造函数和方法 private SqlHelper() { } /// <summary> /// 将SqlParameter参数数组(参数值)分配给SqlComman ...

  5. element UI form 验证

    1 form 添加rules,具体属性添加prop, 注意 prop 属性与v-model 子属性一致 2 data 对象添加 rules 3 验证方法调用 验证规则见: https://github ...

  6. JobScheduler调度器过程（JobSchedulerService的启动过程）

    JobSchedulerService启动过程,最主要工作是从jobs.xml文件收集所有的jobs,放入到JobStore的成员变量mJobSet,转成jobinfo. JobScheduler服务 ...

  7. Microsoft SQL Server on Linux 踩坑指南

    微软用 SQL Server 在 2016 年的时候搞了一个大新闻,宣传 Microsoft ❤️ Linux 打得一众软粉措手不及.但是这还是好事情,Linux 上也有好用的 SQL Server ...

  8. JVM（一）JVM的概述与运行流程

    1.基本概念 JVM和普通虚拟机: 大家常用的两种虚拟机是VMWare和Visual Box,用来操作cpu指令. JVM是程序自己独立的运行环境,对堆栈.寄存器.字符码指令等操作. Java.JRu ...

  9. Android中常见的对话框

    1. 普通对话框 public void click01(View view){ AlertDialog.Builder builder = new AlertDialog.Builder(this) ...

  10. JavaScript -- TextArea

    -----054-TextArea.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...