精华内容
下载资源
问答
  • 图片懒加载和预加载

    2020-03-01 23:58:29
    图片懒加载和预加载 参考:https://www.cnblogs.com/psxiao/p/11542930.html 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。 懒加载懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟...

    图片懒加载和预加载

    参考:https://www.cnblogs.com/psxiao/p/11542930.html

    预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。

    懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

    两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。

    懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

    懒加载:

    img的data-src属性及懒加载:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需要请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。

    通俗一点:

    1、就是创建一个自定义属性data-src存放真正需要显示的图片路径,而img自带的src放一张为1*1px的图片路径。

    2、当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-src的值赋给src。

    ps:自定义属性可以取任何名字

    **场景:**对于图片过多的页面,为了加快页面加载速度,需要将页面内未出现的可视区域内的图片先不做加载,等到滚动可视区域后再去加载。

    **原理:**img标签的src属性用来表示图片的URL,当这个属性值不为空时,浏览器就会根据这个值发送请求,如果没有src属性就不会发送请求。所以,在页面 加入时将img标签的src指向为空或者指向一个小图片(loading或者缺省图),将真实地址存在一个自定义属性data-src中,当页面滚动时,将可视区域的图片的src值赋为真实的值。

    预加载:

    简单理解:就是在使用该图片资源前,先加载到本地来,真正到使用时,直接从本地请求数据就行了。

    var arr = [
        '../picture/1.jpg',
        '../picture/2.jpg',
        '../picture/3.jpg',
    ];
    
    var imgs =[]
    preLoadImg(arr);
    
    //图片预加载方法
    function preLoadImg(pars){
        for(let i=0;i<arr.length;i++){
            imgs[i] = new Image();
            imgs[i].src = arr[i];
        }
    }
    

    预加载其实是声明式的fetch,强制浏览器请求资源,并且不会阻塞onload事件,可以试用以下代码开启预加载。

    <link rel="preload" href="http://example.com"></link>

    预加载可以一定程度上降低首屏的加载时间,因为可以将一些不影响首屏但重要的文件延后加载,唯一缺点就是兼容性不好。

    展开全文
  • 图片懒加载 1. 给需要懒加载的都加上类名 lazy_load <img class="lazy_load" src="img/default.png" data-src="img/sinaweibo.png" alt=""> 2. js文件 $(function () { let length = $(".lazy_load")....

    图片懒加载

    1. 给需要懒加载的都加上类名 lazy_load

     <img class="lazy_load" src="img/default.png" data-src="img/sinaweibo.png" alt="">
    

    2. js文件

    $(function () {
        let length = $(".lazy_load").length
        srcrllLazy()
        setTimeout(() => {
           window.scrollTo(0,0)
        }, 150)
        $(window).scroll(function () {
            trolttle(srcrllLazy, 500)
        })
    
        // 对图片赋值
        function srcrllLazy() {
            var scroH = $(window).scrollTop();  //滚动高度
            var viewH = $(window).height();  //可见高度 
            let height = scroH + viewH
            let n = 0
            for (let i = n; i < length; i++)
                if (height > $(".lazy_load").eq(i).offset().top) {
                    let data_src = $(".lazy_load").eq(i).attr("data-src")
                    $(".lazy_load").eq(i).attr("src", data_src)
                    n++
                }
        }
    
        // 定义一个节流函数
        var time1 = 0
        function trolttle(func, time = 200) {
            let time2 = Date.now()
            if (time2 - time1 > time) {
                time1 = time2
                func()
            }
        }
    })
    

    图片预加载

    1. 将需要预加载的图片改造成下面模式

     <img class="pre_load"
            data-src="https://desk-fd.zol-img.com.cn/t_s4096x2160c5/g6/M00/02/0F/ChMkKl_QMPCIB69QADD-WAzVNyQAAGeKAF02XIAMP5w605.jpg"
            alt="">
    

    2. js

    <script>
        $(function () {
            // 通常用于加载较大的图片
            // 定义一个函数专门用于处理 多个图片的预加载
            // 
            let arr = [
                "body", "body", "body", "body","body"
            ]
            // 参数说明 arr 是每个图片对应要插入的父节点
            function preLoad(arr) {
                let length = $(".pre_load").length
                for (let i = 0; i < length; i++) {
                    let img = new Image()
                    img.src = $(".pre_load").eq(i).attr("data-src")
                    img.onload = function () {
                        $(arr[i]).append(img)
                    }
                }
            }
            preLoad(arr)
        })
    </script>
    
    展开全文
  • JavaScript 图片懒加载和预加载 文章目录JavaScript 图片懒加载和预加载一.背景二.懒加载1.为什么要使用懒加载?2.实现懒加载思路3.懒加载原理4.实现懒加载三.预加载1.为什么要使用预加载2.实现预加载思路3.实现...

    JavaScript 图片懒加载和预加载

    一.背景

    目前各种电商网站层出不穷,大家都知道,电商网站的图片量是非常之多的,其实也不只是电商网站,更有些其他的,图片密集度比较大的网站.由于图片数目较大,等待时间长,并且加载过多的资源,导致些资源浪费,那这种情况,用户体验度就是非常差的了,所以这个时候,懒加载和预加载就是个非常好的解决方案

    二.懒加载

    懒加载:又名延迟加载(简称lazyload),可以在长网页中延迟加载图像,是对网页性能优化的的一种方案,它的核心是按需加载

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

    (1) 提升用户体验 如果一个长网页,一次性把图片全部加载出来,图片密集度非常之高,数目较大,等待时间之久,用户肯定不买账,直接关闭网页走人.

    (2) 减少无效资源加载 按需要去加载数据,没有进入视口的不需要加载,你根本没看他们,加载出来干嘛.所以明显减少服务器的压力和流量,也能减少浏览器的渲染负担

    (3) 防止并发加载的资源过多,阻塞js的加载 影响网站的正常使用

    2.实现懒加载思路

    (1) 利用Image的src有图片地址时才会加载图片

    (2) 图片的初始状态不设置src属性,使用一个自定义属性保存图片路径 如data-src

    (3) 图片进入窗口可视区时给src赋值

    (4) window.onscroll判断图片是否进入窗口:图片到bodyoffsetTop<(窗口高+scrollTop)

    借用网上的一张图片:

    img

    3.懒加载原理

    将页面上的图片src属性设置为空,然后将图片的真实路径存放在当前图片标签的自定义属性data-src上,当页面滚动的时候,需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区域就将图片的src属性设置为data-src的值,然后这样就实现延迟加载

    注意:如果是异步加载的数据,我们实际上只需要做一次请求即可,不需要多次请求

    4.实现懒加载

    //css  
    <style>
        .image-item {
          display: block;
          margin-bottom: 50px;
          height: 200px;
          /* 一定记得设置图片高度 */
       }
    </style>
    
    //html
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/f4eb114554ae8d3d11a11bf0fa436b4a.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4a8fb03ec68c9fa2fdc95a6f40b9f781.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/5c428b3ec1963741846e674ef27f7fe2.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/2d5a291001b0a7dcb7b41d5a990224c1.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
    
    //js
    <script>
        var viewHeight = document.documentElement.clientHeight;//获取可视区高度
        function lazyload() {
            var eleImgs= document.querySelectorAll('img[data-src][lazyload]');
            eleImgs.forEach(function (item, index) {
                //如果data-src属性没有值,直接返回
                if (item.dataset.src === "")
                    return;
                // 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
                var rect = item.getBoundingClientRect();
                /
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    (function () {
                        var img = new Image();
                        img.src = item.dataset.src;
                        img.onload = function () {
                            item.src = img.src;
                        }
                        item.removeAttribute("data-src");//移除属性,下次不再遍历
                        item.removeAttribute("lazyload");
                    })()
                }
            })
        }
        lazyload();//刚开始还没滚动屏幕时,要先触发一次函数,初始化首页的页面图片
        document.addEventListener("scroll", lazyload);
    </script>
    

    三.预加载

    预加载:提前加载图片,当用户需要查看时,直接从本地缓存中去渲染

    资源预加载是网页的另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到.

    1.为什么要使用预加载

    在网页全部加载之前,对一些主要内容进行加载,提供给用户更好的体验,减少等待的时间,如果一个长页面,过于庞大,没有使用预加载,页面就会长时间展现为一片空白,直到所有内容加载完毕

    2.实现预加载思路

    (1) 创建好要显示的图片节点1

    (2) 创建用来加载图片的节点2

    (3) 监听节点2的onload事件

    (4) 返回一个对象,包含一个设置图片src的方法,节点1显示本地图片,节点2加载真正的资源

    3.实现预加载常见方法

    1.使用HTML标签
    <img src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" style="display:none"/>
    
    2.使用Image对象
    var image= new Image()
    image.src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg"
    
    3.使用ajax

    这里不做介绍,会存在一些跨域问题

    4.使用PreloadJS库

    可以参考PreloadJS库

    PreloadJS提供了一种预加载内容的一致方式,以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下,PreloadJS会尝试使用XHR加载内容,因为它提供了对进度和完成事件的更好支持,但是由于跨域问题,使用基于标记的加载可能更好。

    //使用preload.js
    var queue=new createjs.LoadQueue();//默认是xhr对象,如果是new createjs.LoadQueue(false)是指使用HTML标签,可以跨域
    queue.on("complete",handleComplete,this);
    queue.loadManifest([
    {id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
    {id:"myImage2",src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
    ]);
    function handleComplete(){
      var image=queue.getResuLt("myImage");
      document.body.appendChild(image);
    }
    

    四.懒加载和预加载区别

    1.概念

    (1) 懒加载(延迟加载):图片延迟加载,当图片进入视口之后才加载

    (2) 预加载:提前加载图片,当用户需要查看时,直接从本地缓存读取

    2.区别

    二者都是提高页面性能的有效办法,区别是一个是提前加载,一个是延迟加载甚至不加载,懒加载对服务器前端有一定的缓解压力的作用,预加载则会增加服务器前端的压力

    3.意义

    (1) 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

    (2) 预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映

    展开全文
  • 本篇博文介绍了图片懒加载和预加载的实现与原理。

    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函数,最终使得预加载失败。

    展开全文
  • 前端图片懒加载和预加载

    千次阅读 2019-06-19 10:26:00
    懒加载 场景:对于图片过多的页面,为了加快页面加载速度,需要将页面内未出现的可视区域内的图片先不做加载,等到滚动可视区域后再去加载。 原理:img标签的src属性用来表示图片的URL,当这个属性值不为空时,...
  • 1、懒加载1.什么是懒加载?懒加载也就是延迟加载。...这就是图片懒加载。2.为什么要使用懒加载?很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少
  • 什么是懒加载和预加载? 复杂一点的说法参考:https://www.cnblogs.com/zhonghuali/p/9625943.html 我个人的理解是:预加载是提前把图片等资源下载到客户端,一次性请求到所有资源,需要时从客户端调用渲染,减少...
  • javascript实现图片懒加载和预加载

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,286
精华内容 2,914
关键字:

图片懒加载和预加载