懒加载

1.什么是懒加载?

懒加载也就是延迟加载。 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为同一张图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

demo:

//所有img元素的src属性值是同一个图片地址,自定义属性data-src里存储的是真正需要加载的图面地址,当图片出现在浏览器的可视区域内时,再把data-src的属性值赋值给对应的img元素的src属性
<ul class="warp">

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

</ul>

2.为什么要使用懒加载?

很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕,会花费很多不必要的时间。

3.懒加载的原理是什么?

页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素的自定义属性“data-src”(这个名字起个自己认识好记的就行)里,要用的时候就取出来,再设置。

4.懒加载的实现步骤?

首先我们来看一张图:

Paste_Image.png

滚动滑动的垂直距离: var scrollTop = $(window).scrollTop(); 窗口的高度: var windowHeight = $(window).height(); 元素到页面顶部的高度: var offsetTop = $img.offset().top;

由图片可知:当offsetTop < scrollTop + windowHeight && offsetTop > scrollTop ,这时图片元素才在我们的可视窗口

懒加载步骤:

1)首先,不要将图片地址放到src属性中,而是放到自定义属性data-src中。

2)页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。

3)在滚动事件中重复判断图片是否进入视野,如果进入,则将data-src属性中的值取出存放到src属性中。

5.懒加载的优点是什么?

页面加载速度快,减少内存占用,减轻了服务器的压力,节约了流量,用户体验好 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

6.实现图片懒加载代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    ul,li{
      list-style:none;
    }
    .container{
      width: 600px;
      margin: 0 auto;
    }
    .container li{
      float: left;
      margin: 10px 10px;
    }
    .container li img{
      width: 240px;
      height: 180px;
    }
    p{
      float: left;
    }
  </style>
</head>
<body>
    <ul class="container clearfix">
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li><a href="">![](http://upload-images.jianshu.io/upload_images/1969310-7e11b428235a7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>

    </ul>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        /*
        1.对于所有的img标签,把真实的地址放入自定义属性data-img
        2.当滚动页面时,检查页面所有的img标签,看看这个标签是否出现到我们的视野,当出现在我们的视野时
        再去判断它是否已经加载过,如果没有加载,加载它

        */

        
        // 用户第一次打开页面,还未滚动窗口的时候需要执行一次 lazyRender
        lazyRender();

        var clock;
        $(window).on('scroll',function(){
             //用户鼠标滚轮滚动一次,有多次事件响应。下面的 setTimeout 主要是为性能考虑,只在最后一次事件响应的时候执行 lazyRender
            if(clock){
                clearTimeout(clock)
            }
            clock = setTimeout(function(){
                lazyRender();
            }, 300)
            
        })


        function lazyRender() {
            $('.container img').each(function(){
                if( checkShow($(this)) && !isLoaded($(this)) ){
                    loadImg($(this))
                }
            })

        }

        //判断在没在可视窗口
        function checkShow($img) {
            //滚动的高度
            var scrollTop = $(window).scrollTop();
            //窗口的高度
            var windowHeight = $(window).height();
            //元素到页面顶部的高度
            var offsetTop = $img.offset().top;
            //offsetTop < scrollTop + windowHeight && offsetTop > scrollTop ,这是元素才在我们的可视窗口
            if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
                return true;
            }
            return false;
        }
        //判断加没加载过
        function isLoaded($img) {
            return $img.attr('data-src') === $img.attr('src')
        }

        function loadImg($img) {
            $img.attr('src',$img.attr('data-src'))
        }
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6948
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25410
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5556
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

2988
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2587
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2802
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070

扫码关注云+社区