精华内容
下载资源
问答
  • 本篇博文介绍了图片懒加载和预加载的实现与原理。

    1、背景

    我们在项目开发的时候经常会有图片展示,如有用户头像这类几KB的图片,也有照片、截图这类动则几MB的图片。对于几KB的图片加载速度是很快的,而几MB的图片在网速不佳时,那加载的时长会让你奔溃。

    比如,你在浏览一系列图片的时候,如果要等所有图片都缓存到本地浏览器才可以看,那将会让你等很久。这就可以使用懒加载技术来帮助我们,让用户浏览图片时只加载前后几张图片,随着滑动浏览完再慢慢加载另外一批图片。在轮播图功能中也常需要这种技术。

    再有另外一种场景,你想用一个img标签来动态切换显示图片,每次只显示一张照片,没有滑动的操作,如果在一个网速比较差的环境,图片显示完成后,切换src—请求加载—显示,这个时间就显得比较久,很影响用户体验。这时候就可以使用预加载技术来帮助我们,让显示当前图片时就开始请求加载下一张图片,等上张图片切换src后直接显示。

    2、懒加载

    2.1、实现

    //1、安装插件:
    npm install vue-lazyload --save-dev
    
    //2、在main.js 中添加插件
    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        error:'./static/error.png', //报错需要的图片
        loading:'./static/loading.png'// 替换需要的图片
    })
     
    //3、将vue组件中img标签的:src=""属性修改为v-lazy=""
    <img v-lazy="pictureSrcURL"/>
    

    附上vue-lazyload的参考文档:https://www.npmjs.com/package/vue-lazyload

    2.2、原理

    懒加载的实现有两种方法:1)DOM元素的getBoundingClientRect方法;2)DOM元素的intersectionObserver方法。

    1)getBoundingClientRect 方法能够返回当前DOM节点相关的css边框集合,其中有一个Top 属性代表当前DOM 节点距离浏览器窗口顶部的高度,只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight),若小于说明已经进入用户视野,此时就能将loading状态的图片替换为真正的图片。

    注意事项

    1. 因为需要监听scroll 事件,不停的判断top 的值和浏览器高度的关系,所以需要对监听事件进行函数节流;
    2. 当屏幕首次渲染时,不会触发scroll 事件,需要主动调用一次事件处理程序,否则若用户不滚动则首屏的图片会一直使用懒加载的默认图片;
    3. 当所有需要懒加载的图片都被加载完,需要移除事件监听,避免不必要的内存占用。

    2)intersectionObserver方法作为一个构造函数,需要传入一个回调函数作为参数,生成一个实例observer,这个实例有一个observe方法用来观察指定元素是否进入了用户的可视范围,随即触发传入构造函数中的回调函数。同时需要给回调函数传入一个entries 的参数,记录着这个实例观察的所有元素的对象,其中intersectionRatio 属性表示图片已经进入可视范围百分比,大于0 表示已经有部分进入了用户视野,此时就能将loading状态的图片替换为真正的图片,并且调用实例的unobtrusive方法将这个img 元素从这个实例的观察列表的去除,较第1种方法简便。

    3、预加载

    3.1、实现

    export default {
      data () {
        return {
          realPictureURL: ''
          pictureURLList: [../aaa.png, ../bbb.png, ../ccc.png, ../ddd.png]
        }
      }
      methods:{
        //可以写一个setInterval函数,定时执行这个函数。
        changePictureURL(idnex){
          //1、创建一个img对象
          let newImg = new Image();
          //2、注意需要先定义好onload时间,再对img对象的src赋值
          //否则无法触发onload函数
          newImg.onload = () => {
            this.realPictureURL = newImg.src;
          }
          newImg.src = this.pictureURLList[index];
        }
      }
    }
    

    3.2、原理

    当image对象加载完图片之后会触发onload函数,在浏览器中加载完图片会自动放在缓存中,在一定时间内重复访问相同的url,首先会在浏览器的缓存中找,如果找不到的话,再根据url去访问服务器并缓存到浏览器中。
    需要注意的是
    1)onload函数需要先定义,
    2)再为image对象的src属性赋值。
    如果把这两个步骤颠倒,虽然能加载到图片,但是无法触发到onload函数,最终使得预加载失败。

    展开全文
  • vue懒加载图片懒加载

    2020-07-07 10:20:55
    main.js中: main.js中: ...//预加载高度 preLoad: 1.3, //错误时显示的图片 error: ‘static/about111.jpg’, //图片加载中显示的图片 loading: ‘static/img/loading.gif’, //尝试加载次数 attempt: 1 }

    main.js中:

    npm install vue-lazyload --save-dev;
    import VueLazyload from 'vue-lazyload';
    
    Vue.use(VueLazyload, {
       //预加载高度
       preLoad: 1.3,
       //错误时显示的图片
       error: '/assets/image/defaultImg.png',
       //图片加载中显示的图片
       loading: '/assets/image/defaultImg.png',
       //尝试加载次数
       attempt: 1
     })
    

    在组件中使用时,将img标签的src换成v-lazy(注:v-lazy前不要加‘:’):

    未使用懒加载前的代码:
    <li><img class="g-img1"src="static/1.jpg" alt=""></li>
    
    使用懒加载后的代码:
    <li><img class="g-img1" v-lazy="'static/1.jpg'" alt=""></li>
    

    扩展

    在不同的页面中显示不同的加载占位图的写法
    <img v-lazy="{src: item.imgUrl, loading: 'http://www.xxx.com/loading.png'}" alt="" />
    
    背景图使用懒加载的写法
    v-lazy:background-image="{src: item.imgUrl, error: 'http://www.xxx.com/error.png', loading: 'http://www.xxx.com/loading.png'}"
    
    展开全文
  • Vue 中实现图片预加载 + 加载原理实现

    万次阅读 多人点赞 2019-05-17 20:08:18
    看这个时需求先看看:https://blog.csdn.net/Tom__cy/article/details/90234108 -----能够加快理解 ... JS: imgArr 为 所有的图片信息 , imgCount: 为动态的显示百分比 Vue的生命周期: mounted ...

    ##懒加载----------------------------------------------------

     插件---------
    . 安装插件:
    npm install vue-lazyload --save-dev
    
    
    使用插件
    main.js 中使用:
    
    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        error:'./static/error.png',                        //报错需要的图片
        loading:'./static/loading.png'					// 替换需要的图片
    })
     
    图片替换:
    
     vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 
    
    <img class="item-pic" v-lazy="newItem.picUrl"/>
     
     
    
    图片懒加载原理实现
    	getBoundingClientRect
          DOM 元素包含一个getBoundingClientRect 方法, 执行该方法返回当前DOM节点相关的Css边框集合,其中有一个Top 属性代表当前DOM 节点距离浏览器窗口顶部的高度,只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight),若小于说明已经进入用户视野,然后替换为真正的图片即可
              另外使用getBoundingClientRect 作图片懒加载需要注意三点
                1。 因为需要监听scroll 事件,不停的判断top 的值和浏览器高度的关系,请对监听事件进行函数节流
                2. 当屏幕首次渲染时,不会触发scroll 事件,请主动调用一次事件处理程序,否则若用户不滚动则首屏的图片会一直使用懒加载的默认图片
                3. 当所有需要懒加载 的图片都被加载完,需要移除事件监听,避免不必要的内存占用
    
    
     intersectionObserver
          intersectionObserver作为一个构造函数,传入一个回调函数作为参数,生成一个实例observer,
          这个实例有一个observe方法用来观察指定元素是否进入了用户的可视范围,随即触发传入构造函数中的回调函数
          同时给回调函数传入一个entries 的参数,记录着这个实例观察的所有元素的对象,其中intersectionRatio 属性表示图片已经进入可视范围百分比,大于0 表示已经有部分进入了用户视野
          此时替换为真实的图片,并且调用实例的unobtrusive 将这个img 元素从这个实例的观察列表的去除
    
    
    JS---方法一: getBoundingClientRect
    
      let imgList1 = [...document.querySelectAll("img")]
        let num = imgList1.length
    
        let lozyload1 = (()=>{
          let count = 0 
         return function(){
           let newArr = []
            imgList1.forEach((item, index)=>{
            let Rect =  item.getBoundingClientRect()
            if(Rect.top < window.innerHeight){
              Rect.src = Rect.dataset.src 
              newArr.push(index)
              count ++
              if(count === num ){
                document.removeEventListener("srcoll" , lozyload1)
              }
            }
          })
          //删除已加载完毕的图片
          imgList1 = imgList1.filter((_ , index)=> !newArr.includes(index))
        } 
        })()
        这里调用了throttle 的节流函数
        lozyload1 = proxy(lozyload1 , 100)
        document.addEventListen("srcoll" , lozyload1)
        手动执行一次,加载首屏图片
        lozyload1()
    
    
    
    方法二:----intersectionObserver
    
       let imgList2 = [ ...document.querySelectAll("img") ]
    
          let lozyload2 = (()=>{
            实例化observer
            let observer = new IntersectionObserver( entries =>{
              entries 存储着所有观察元素的intersectionObserverEntry 配置
              entries.forEach(entry=>{
                if(entry.intersectionRatio > 0 ){
                  entry.target.src = entry.target.dataset.src 
                  //取消观察
                  observer.unobserve(entry.target)
                }
              })
            })
    
            imgList2.forEach(img=>{
              observer.observe(img)
            })
          })
    
          lozyload2()
    

    ##Vue中的预加载-------------------------------------

    
     
     
    
    解析代码: HTML:  img 标签为背景图, loading 图, P 标签为显示的百分比, 
    	
    	JS: imgArr 为 所有的图片信息 , 
    			imgCount: 为动态的显示百分比
    
    Vue的生命周期: mounted ,在页面加载完成时执行 loading 函数,
    
    	在methods :中执行方法:   先将data 中的数据写到methods 中( 本人比较懒, 不想调用this ) 
    		然后对所有的imgArr 进行遍历 ,  最后  image.onload 方法 , 代码在下面
    
    

    在这里插入图片描述

    这里面有个小坑, 就是图片动态加载时, 需求添加require , 用require 标签包裹下 ,   下面是图片   ,::::: 和img 图片路径
    

    在这里插入图片描述

    展开全文
  • 懒加载和预加载的实现和区别

    千次阅读 2018-07-24 15:22:36
    懒加载 1、什么是懒加载懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的...

    懒加载

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

    2、为什么要使用懒加载?
    很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。

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

    4、懒加载的实现步骤?
    方法一:第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
    方法二:是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
    方法三:可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。

    5、懒加载的意义?
    页面加载速度快、可以减轻服务器的压力、减少请求数或延迟请求数

    6、代码:

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <title>lazyload</title>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                text-decoration: none;
                list-style: none;
            }
    
            .layout {
                margin: 0 auto;
                width: 1000px;
            }
    
            .lazyload img {
                width: 300px;
                height: 400px;
            }
    
            .img-ct {
                margin-left: -50px;
                overflow: auto;
            }
    
            .item {
                float: left;
                margin-left: 50px;
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
    <div class="lazyload">
        <div class="layout">
            <ul class="img-ct">
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
                </li>
            </ul>
        </div>
    </div>
    
    
    <script type="text/javascript">
        var lazyLoad = (function () {
            var clock;
    
            function init() {
                $(window).on("scroll", function () {
                    if (clock) {
                        clearTimeout(clock);
                    }
                    clock = setTimeout(function () {
                        checkShow();
                    }, 1200);
                })
                checkShow();
            }
    
            function checkShow() {
                $(".lazyload img").each(function () {
                    var $cur = $(this);
                    if ($cur.attr('isLoaded')) {
                        return;
                    }
                    if (shouldShow($cur)) {
                        showImg($cur);
                    }
                })
            }
    
            function shouldShow($node) {
                var scrollH = $(window).scrollTop(),//现在滚动条的高度
                    winH = $(window).height(),//每张窗口的高度
                    top = $node.offset().top;//offsetTop 始终指向相对于其定位的祖辈元素的坐标的高度,是固定的,无论祖先元素 是否滚动  ps:(意思就是这个元素自己没有滚动条 他的祖先元素有滚动条,)
                if (top < winH + scrollH) {
                    //如果当前的高度小于滚动条和窗口的高度的和就加载图片
                    return true;
                } else {
                    return false;
                }
            }
            //赋值实现加载图片
            function showImg($node) {
                $node.attr('src', $node.attr('data-img'));
                $node.attr('isLoaded', true);
            }
    
            return {
                init: init
            }
        })()
        lazyLoad.init();
    </script>
    </body>
    </html>

    预加载

    1、什么是预加载?
    提前加载图片,当用户需要查看时可直接从本地缓存中渲染

    2、为什么要使用预加载?
    图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。

    3、实现预加载的方法有哪些?
    方法一:用CSS和JavaScript实现预加载
    方法二:仅使用JavaScript实现预加载
    方法三:使用Ajax实现预加载

    4、预加载的意义
    牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。

    5、代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title></title>
        <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    
    </head>
    <body>
    <div class="box">
        <div> 1111</div>
    </div>
    <script type="text/javascript">
        function loadImage(url, callback) {
            var img = new Image();
            img.onload = function () {
                img.onload = null;
                callback(img);
            }
            img.src = url;
        }
    
        function call(img) {
            $(img).appendTo('.box');
        }
    
        // loadImage('http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg',call);
        loadImage('../images/a.jpg', call);
        loadImage('../images/b.jpg', call);
        loadImage('../images/c.jpg', call);
        loadImage('../images/d.jpg', call);
    
    </script>
    </body>
    </html>
    

     

    展开全文
  • 懒加载和预加载

    2017-11-06 11:20:20
    加载 延迟加载 预加载 概念
  • 1、为什么要加载或者预加载图片对页面加载速度影响非常大当页面图片比较多,加载速度慢,非常影响用户体验 思考一下,页面有可能有几百张图片,但是首屏上需要展示的可能就一张而已,其他的那些图片能不能晚一点再...
  • javascript实现图片懒加载和预加载

    千次阅读 2018-03-29 19:34:02
    所谓加载就是通过某些特定的条件,然后再给图片的src赋值,常见的加载方式有点击加载和滚动加载。 如果是点击加载,那么一般是通过点击事件。例如: 然后添加点击事件: 效果如下: 如果是加载,那么就...
  • vue 预加载数据

    千次阅读 2020-11-18 13:54:43
    需求: 进入vue 项目 预加载接口 思路: 依靠路由进行加载,执行方法; 方案一: 路由守卫 router.beforeEach((to, from, next) => { if (to.query.health_token) { $apis .prestrain({ token: to.query....
  • vue图片懒加载

    2019-01-22 17:03:01
    vue图片懒加载插件 vue-lazyload@TOC 简单体积小的vue图片懒加载插件 vue-lazyload npm i vue-lazyload --save yarn add vue-lazyload 在main.js里引入 import VueLazyload from ‘vue-lazyload’ Vue.use...
  • 预加载是指在页面加载完成之前,提前将所需资源下载,之后使用的时候从缓存中调用;加载是延迟加载,按照一定的条件或者需求等到满足条件的时候再加载对应的资源 预加载增加了服务器压力,换来的是用户体验的...
  • 原文来自:https://segmentfault.com/a/1190000016666816作者:...这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场...
  • Vue懒加载手写逻辑

    2018-03-09 11:55:43
    需求:比如我们要先加载6条信息,触底时候再加载6条信息1、第一次加载6条,aaa为我们的接口,所以在mounted里面写this.aaa(6)2、在aaa事件里面传num,如aaa(num),然后拼接在接口3、每次触底,再次执行aaa接口4、定义...
  • 图二用requireimport的异步加载;用异步加载的方式优化了打包;避免直接打包成一个大的文件;异步加载是打包成一个个小文件进行按需加载的,避免了首页加载时间过于长的问题。(图二相对于图一的优化是:用import...
  • 浏览器【加载资源】机制: 1.前提摘要:从输入URL到看到页面的时间(单单指前端部分,不考虑后端相应时间等问题) 2.前端部分主要花费的时间在这【3】部分: ①HTML页面请求时间(就是发送URL请求到拿到HTML字符...
  • vue 图片的懒加载

    2019-05-03 16:27:47
    面试的时候一直被问加载,预加载的问题,回答的比较含糊。利用假期做了个vue加载,具体如下。 首先你的安装 npm install vue-lazyload --save-dev 或者yarn add vue-lazyload --save-dev 然后在main.js 里面...
  • vue 图片懒加载

    2019-08-18 17:17:46
    vue-lazyload npm安装方法 npm install vue-lazyload main.js import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // or with options 也可以直接在这里设置参数 Vue.use(VueLazyload, { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,272
精华内容 4,908
关键字:

vue懒加载和预加载

vue 订阅