懒加载

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 条评论
登录 后参与评论

相关文章

来自专栏技术总结

Swift3.1动画(二)

1505
来自专栏项勇

笔记27 | WindowManager实现悬浮窗口总结

2076
来自专栏何俊林

打造狂拽炫酷的主流自定义侧滑控件(仿酷狗和QQ5.0)

前言:自定义侧滑控件是一直是很多在app端的软件用的比较多的方式,本文来自 Mero技术博客授权本公众号独家发布文章,Mero技术博客blog地址:http:/...

18110
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

1865
来自专栏河湾欢儿的专栏

(第一版)知识点

752
来自专栏何雪斌的专栏

Web前端事件

事件是与浏览器或文档交互的瞬间,如点击按钮,填写表格等,它是JS与HTML之间交互的桥梁。DOM是树形结构,若同时给父子结点绑定了相同的事件,那么他们的执行顺序...

7520
来自专栏前端说吧

js - 预加载+监听图片资源加载制作进度条

这两天遇到一个新需求:一个一镜到底的h5动画。因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕。即处理预加载。

971
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

856
来自专栏hightopo

基于 HTML5 的 3D 工控隧道案例

962
来自专栏逍遥剑客的游戏开发

Direct3D学习(三):光影贴图

2318

扫码关注云+社区