懒加载

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

相关文章

来自专栏陈满iOS

iOS·为WKWebView实现夜间模式切换/网页背景颜色切换功能

2533
来自专栏青玉伏案

IOS开发之视图和视图控制器

        视图(View), 视图控制器(ViewController)是IOS开发UI部分比较重要的东西。在学习视图这一块的东西的时候,感觉和Java ...

1747
来自专栏iOS开发攻城狮的集散地

iOS 瀑布流之栅格布局

1201
来自专栏计算机编程

SNS项目笔记<六>--手势Gestures

这里直接贴上angular源码地址:angular源码之hammer_gestures <这里方便它更新后的修改> 这里又贴上该地址的源码以便说明:

1711
来自专栏MasiMaro 的技术博文

SDK平台三态按钮的实现

Windows平台提供了丰富的控件,但是在使用中我们不会使用它提供的默认风格,有时候需要对控件进行改写,让它展现出更友好的一面,这次主要是说明三态按钮的实现。

1284
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十九——标签页的使用

    Bootstrap中通过为导航标签增加data-toggle="tab",配合类或id来进行标签页的关联,示例如下:

891
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

2714
来自专栏進无尽的文章

实践-小效果 II

UIApplication *app = [UIApplication sharedApplication]; // 应用程序右上角数字 app.applica...

881
来自专栏Android机器圈

Achartengine.jar绘制动态图形一 --饼图

PS:我们在做安卓程序的时候,免不了会做一些图形,自己可以选择自定义view ,就是用Canvas画,也可以用写好的jar包,就是achartengine.ja...

4388
来自专栏刘庆红的专栏

iOS 11 安全区域适配总结

本文主要是对 iOS 11下 APP 中 tableView 内容下移 20 pt 或下移 64 pt 的问题适配的一个总结。

7332

扫码关注云+社区