懒加载提高用户体验_小程序提高用户体验 加载速度 - CSDN
  • 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的...

    定义

    图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。 
    惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。

    实现

    懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)

    判断是否存在于可视区

    1. 浏览器视口高度

    2. 待加载资源距离视口顶端位置

    通过以上两点即可判断图片是否位于可视区内。

    var nodes = document.querySelectorAll('img[data-src]'),

       elem = nodes[0],

       rect = elem.getBoundingClientRect(),

       vpHeight = document.documentElement.clientHeight;

    if(rect.top < vpHeight && rect.bottom>=0) {

     console.log('show')

    }

    之后获取图片的真实地址

    <img src="loading.gif" alt="" data-src='1.gif'>

    ...

     

    <script>

       var src = elem.dataset.src;

    </script>

    把真实地址赋给图片

    var img = new Image();

    img.onload = function(){

     elem.src = img.src;

    }

    img.src = src;

    完整代码如下

    var scrollElement = document.querySelector('.page'),

       viewH = document.documentElement.clientHeight;

     

    function lazyload(){

     var nodes = document.querySelectorAll('img[data-src]');

     

     Array.prototype.forEach.call(nodes,function(item,index){

       var rect;

       if(item.dataset.src==='') return;

     

       rect = item.getBoundingClientRect();

     

       if(rect.bottom>=0 && rect.top < viewH){

           (function(item){

             var img = new Image();

             img.onload = function(){

               item.src = img.src;

             }

             img.src = item.dataset.src

             item.dataset.src = ''

           })(item)

       }

     })

    }

     

    lazyload();

     

    scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));

     

    function throttle(fun, delay, time) {

       var timeout,

           startTime = new Date();

       return function() {

           var context = this,

               args = arguments,

               curTime = new Date();

           clearTimeout(timeout);

           if (curTime - startTime >= time) {

               fun.apply(context, args);

               startTime = curTime;

           } else {

               timeout = setTimeout(fun, delay);

           }

       };

    };

    展开全文
  • 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的...

    定义

    图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。 
    惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。

    实现

    懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)

    判断是否存在于可视区

    1. 浏览器视口高度

    2. 待加载资源距离视口顶端位置

    通过以上两点即可判断图片是否位于可视区内。

    var nodes = document.querySelectorAll('img[data-src]'),
    
       elem = nodes[0],
    
       rect = elem.getBoundingClientRect(),
    
       vpHeight = document.documentElement.clientHeight;
    
    if(rect.top < vpHeight && rect.bottom>=0) {
    
     console.log('show')
    
    }
    之后获取图片的真实地址

    <img src="loading.gif" alt="" data-src='1.gif'>
    
    ...
    
     
    
    <script>
    
       var src = elem.dataset.src;
    
    </script>
    把真实地址赋给图片

    var img = new Image();
    
    img.onload = function(){
    
     elem.src = img.src;
    
    }
    
    img.src = src;
    完整代码如下

    var scrollElement = document.querySelector('.page'),
    
       viewH = document.documentElement.clientHeight;
    
     
    
    function lazyload(){
    
     var nodes = document.querySelectorAll('img[data-src]');
    
     
    
     Array.prototype.forEach.call(nodes,function(item,index){
    
       var rect;
    
       if(item.dataset.src==='') return;
    
     
    
       rect = item.getBoundingClientRect();
    
     
    
       if(rect.bottom>=0 && rect.top < viewH){
    
           (function(item){
    
             var img = new Image();
    
             img.onload = function(){
    
               item.src = img.src;
    
             }
    
             img.src = item.dataset.src
    
             item.dataset.src = ''
    
           })(item)
    
       }
    
     })
    
    }
    
     
    
    lazyload();
    
     
    
    scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));
    
     
    
    function throttle(fun, delay, time) {
    
       var timeout,
    
           startTime = new Date();
    
       return function() {
    
           var context = this,
    
               args = arguments,
    
               curTime = new Date();
    
           clearTimeout(timeout);
    
           if (curTime - startTime >= time) {
    
               fun.apply(context, args);
    
               startTime = curTime;
    
           } else {
    
               timeout = setTimeout(fun, delay);
    
           }
    
       };
    
    };
    转载来源:http://blog.csdn.net/Magneto7/article/details/55518784




    展开全文
  • 其实现在看来都可以用一句话概括,懒加载是使用时再加载资源,可以提升加载速度,减轻服务器压力,提高用户体验;预加载是提前加载资源,对于图片数量大的网站极具优势,保证了图片快速展示,牺牲服务器性能去提升...

    (整理自以前的博客)
    之前只是听过这两者,并不知道如何使用,也不知道它们之间的区别。
    其实现在看来都可以用一句话概括,懒加载是使用时再加载资源,可以提升加载速度,减轻服务器压力,提高用户体验;预加载是提前加载资源,对于图片数量大的网站极具优势,保证了图片快速展示,牺牲服务器性能去提升用户体验。
    接下来我们详细看一下这两种加载方式:

    1.懒加载
    (1)懒加载的实现:懒加载就是访问页面时,先把图片换成1×1px的占位符,只有图片出现在浏览器可视区域时,设置真正的路径,图片正常显示。

    (2)使用懒加载的好处:有一种页面比如电商网站,图片特别多,如果一次性加载完毕,就会使用户等待很长时间。

    (3)懒加载原理:先在页面中把所有的图片统一使用一张占位图进行占位,把路径存在元素的“data-url”(这个名字起个自己认识好记的就行)属性里,要用的时候就取出来,再设置。

    (4)实现步骤:

    1. 不要将图片地址放到src属性中,而是放到其它属性(data-original)中。
    2. 页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。
    3. 在滚动事件中重复判断图片是否进入视野,如果进入,则将data-original属性中的值取出存放到src属性中。

    2.预加载
    1)预加载就是提前加载图片,用户查看时可直接从本地缓冲中渲染。

    (2)使用预加载的好处:对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。

    (3)实现预加载的方法:详见
    方法一:用CSS和JavaScript实现预加载

    方法二:仅使用JavaScript实现预加载

    方法三:使用Ajax实现预加载

    展开全文
  • 在网页中合理使用预加载和懒加载有效地减少用户的等待时间,提高用户体验。 目录 页面加载过程 预加载 懒加载 该篇博客参考以下文章总结而成: Javascript图片预加载详解 懒加载和预加载的...

    JavaScript中的预加载和懒加载

    预加载和懒加载的使用场景不同,可以先了解一下浏览器机制,有助于理解两者的原理。在网页中合理使用预加载和懒加载有效地减少用户的等待时间,提高用户体验。

    目录

    • 页面加载过程
    • 预加载
    • 懒加载

    该篇博客参考以下文章总结而成:
    Javascript图片预加载详解
    懒加载和预加载的实现

    页面加载过程

    简单说一下页面的加载过程,如果页面不是第一次访问,那么可能会出现浏览器缓存现象,在本地调试代码的时候也会遇到这种问题,所以在实在想不通页面为什么没有变化的时候,可以清除一下浏览器的缓存。


    如果页面是第一次访问,浏览器向服务器http请求后,服务器返回html文件,在整个页面加载过程中,总的来说是按顺序从上到下执行,这是基于js的单线程机制,但是html和css是并行加载的,html生成dom树,css生成rule树,两者相结合生成render树。


    接下来遇到js文件,则会造成堵塞,页面会一直等到js文件执行完才会进行下一步操作。


    在进行html中body部分加载时,如果遇到图片的src,它会请求资源,此时图片还没下载完全,在页面上并不会留下图片的位置,而html不会堵塞,将会继续执行下去。


    等到有图片请求下载完成,html又会重新渲染页面,将图片显示出来。

    了解了页面的加载过程后更好理解预加载和懒加载,对页面进行更好的优化。

    预加载

    预加载的核心:
    1. 图片等静态资源在使用前提前请求。
    2. 资源后续使用可以直接从缓存中加载,提升用户体验。
    几个误区:
    1. 预加载不是为了减少页面加载时间
    2. 预加载只是提前加载除去首轮加载的图片以后要用到的图片,比如通过点击等事件才会用到的图片。
    预加载的三种方式

    一、css+javascript
    仅使用css的情况:

    #preload-01 { background: url(img1.png); }
    #preload-02 { background: url(img2.png); }
    #preload-03 { background: url(img3.png); }
    

    preload-01、preload-02、preload-03实际上是不会在页面上显示的,它们的作业就是为了预加载图片上面的图片。在执行了上面的css后,本地就已经有了上面的图片缓存,后面如果还需要该图片,则直接从缓存在读取,减少了用户的等待时间。


    在前面提到,预加载不是为了减少页面加载时间,但是向上面那样写,预加载和页面上其他内容一起加载,还会加长页面的加载时间,用户在点进页面时,等待时间加长,并没有达到我们提高用户体验的目的,我们可以封装一个函数,推迟预加载时间,等页面加载完成后再预加载。

    function preload(){
        if(document.getElementById){
            document.getElementById("preload-01").style.background = "url(img1.png)";
            document.getElementById("preload-02").style.background = "url(img2.png)";
            document.getElementById("preload-03").style.background = "url(img3.png)";
        }
    }
    function addLoadEvent(func){
        var oldonload = window.onload;
        if(type window.onload != "function"){
            window.onload = func;
        }else{
            window.onload = function(){
                if(oldonload){
                    oldonload();
                }
                func();
            }
        }
    }
    addLoadEvent(preload);
    

    或者可以直接将上面的preloader函数放在body的最后,在所有js的最后执行。
    二、仅使用JavaScript
    上面的方法将图片放在css里实现预加载,也可以仅使用JavaScript来实现预加载。在js中,需要多少预加载图片,就创建多少image对象,再为每个image对象添加图片的src,此时图片也会被提前请求。

    var images = new Array();
    function preload(){
        for(var i = 0;i < preload.arguments.length;i ++){
            iamges[i] = new Image();
            images[i].src = preload.arguments[i];
        }
    }
    preload(url1,url2,url3);
    //也可以将上面的代码改写一下
    function preload(){
        if(document.images){//document.images:页面上所有图片的集合
            var img1 = new Image();
            var img2 = new Image();
            var img3 = new Image();
            img1.src = url1;
            img2.src = url2;
            img3.src = url3;
        }
    }
    

    预加载的原理都差不多,也可以再添加一个addLoadEvent函数来推迟预加载时间,实现方法同第一点一致。
    三、使用ajax
    只要是静态资源都可以预加载,包括图片,css,js,可以使用ajax请求这些静态资源,这样也不会影响当前页面。

    window.onload = function(){
        setTimeout = (function(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET','js文件地址');
            xhr.send('');
            xhr = new XMLHttpRequest();
            xhr.open('GET','css文件地址');
            xhr.send('');
            new Image().src = '图片地址';
        },1000);
    }
    //另一种写法
    window.onload = function(){
        setTimeout(function(){
            var head = document.getElementsByTagName('head')[0];
            var css = document.createElement('link');
            css.type = 'text/css';
            css.rel = 'stylesheet';
            css.href = 'css地址';
            var js = document.createElement('script');
            js.type = 'text/javascript';
            js.src = 'js地址';
            head.appendChild(css);
            head.appendChild(js);
            new Image().src = '图片地址';
        },1000)
    }
    

    这里使用setTimeout的原因是为了防止脚本被挂起,可以了解一下浏览器的GUI渲染线程和JS引擎,两者是相斥的,在JS引擎执行时,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。

    懒加载

    懒加载的核心:

    1. 仅显示可视区的图片资源,不可见区域的资源暂不请求。
    2. 使用懒加载可以减少页面的加载时间。
    3. 使用于需要大量图片的页面。


      实现要点:将图片的src设为空,或者也可以将所有图片的src设一个底图,当图片还没加载完时,用这张底图来占图片的位置,防止页面结构混乱。再给一个自定义的data-url属性,用来存放图片的真实路径。lazyload属性用来标明哪些图片是需要懒加载。监听滚动事件,只在图片出现在可视区时,才动态地将图片的真实地址赋予图片的src属性。
    <img src="" lazyload="true" data-url="1.jpg"/>
    
    var viewHeight = document.documentElement.clientHeight;//可视区域的高度
    function lazyload(){
        var eles = document.querySelectorAll('img[data-url][lazyload]');
        Array.prototype.forEach.call(eles,function(item,index){
            var rect;
            if(item.dataset.url === ''){//html5 data 钩子的写法
                return;
            }
            rect = item.getBoundingClientRect();//getBoundingClientRect()返回一个矩形对象.
            if(rect.bottom >= 0 && rect.top < viewHeight){
                !function(){//感叹号表明这是一个函数表达式
                    var img = new Image();
                    img.src = item.dataset.url;
                    img.onload = function(){
                        item.src = img.src;
                    }
                    item.removeAttribute('data-url');
                    item.removeAttribute('lazyload');
                }()
            }
        })
    }
    lazyload();//首屏调用
    document.addEventListener('scroll',lazyload);
    
    展开全文
  • 懒加载提高页面性能

    2018-03-22 17:21:28
    一、什么是懒加载? 懒加载,就是延迟加载。针对于多图片的页面,只有当该图片出现在页面视区中时,再加载该图片。。可以防止页面一次性加载完所有的图片,用户等待时间较长,影响用户体验。二、如何实现懒加载 1....

    一、什么是懒加载?

      懒加载,就是延迟加载。针对于多图片的页面,只有当该图片出现在页面视区中时,再加载该图片。。可以防止页面一次性加载完所有的图片,用户等待时间较长,影响用户体验。

    二、如何实现懒加载

     1. 将页面中的图片的src属性设置为空,并将src属性真正的值存放在自定义属性data-originnal(自定义属性以data-开头)。

     2.为页面中的图片设置好大小,防止引起页面的回流,影响性能。

     3.判断元素是否进入用户视野中。(利用元素的offsetTop属性与  scrollTop、clientTop之间的关系判断)。若进入视野,则将      data-original属性的值赋给图片的src属性

     4.  滚动,重复判断元素是否进入视野。

    三、具体实现:

    1.设计HTML

    <img data-original="mogu.jpg" alt="" class="picture" src=""  >

    2.判断元素是否进入视野

    if(scrollTop+height>offsetTop){					
    					
    	var img = new Image();             //跨域异步请求图片
            			
           	img.onload = function () {
           		console.log(1);
             	item.src = img.src;
           	}
          	img.src = item.dataset.original;    //获取自定义对象的属性
          				   				
    }

    四、完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>lazyload</title>
    	<style>
    	#pictures{
    		width: 900px;
    		border: 1px solid #ccc;
    		overflow: hidden;
    	}
    	.picture{
    		float:left;
    		width:250px;
    		height:250px;
    		margin: 10px 20px;
    		border:1px solid #ccc;
    
    	}
    	</style>
    	
    </head>
    <body>
    	<div id="pictures">
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
    
    	</div>
    	<script>
    		var images=document.getElementsByTagName('img');
    		function lazyload() {
    		    Array.prototype.forEach.call(images,function(item,index) {
    				
    				var height=document.documentElement.clientHeight;				
    				var scrollTop=document.documentElement.scrollTop;				
    				var offsetTop=item.offsetTop;				
    
    				if(scrollTop+height>offsetTop){					
    					
    					var img = new Image();        			
           				        img.onload = function () {       					    
             		 		   item.src = img.src;
           				        }
          				img.src = item.dataset.original;      				   				
    			        }							
    			});		
    		}
    		lazyload();                   //第一次加载页面时需要自动加载
    
    		document.addEventListener("scroll",lazyload); 
    
    	</script>
    </body>
    </html>

    五、代码中的基础问题以及解决方法

     1.判断是否进入可视区

         

    2.获取自定义的属性

       1.通过element.dataset.original.

          语法:

                   

         基本上最新的浏览器都支持,对于低版本的浏览器兼容性不好。

      对于 element.dataset的详细使用,参考链接点击打开链接

      对于如何兼容低版本的浏览器,请参考   我的文章 ,实现兼容版本的element.dataset。

      2.通过 document.getAtrribute(“data-original”);

         兼容性好

    六、代码的其他问题

       判断元素是否在可视区域时,会重复判断元素,造成浪费。

    七、使用echo.js库实现预加载

      echo.js使用原生js编写,不需要依赖其他库。可独立使用。(lazyload是jquery插件,使用时必须引入jquery,功能完善)

          1. 下载并引入echo.js。  

    <script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>

          2.设置图片的自定义属性为data-echo

          3. 使用:获取元素并调用init()方法。接收一个对象。对象参数如下。

             offset:图片在可视区域下方一段距离时,开始加载

             throttle:图片延迟多少毫秒后加载。   

             unload:是否卸载在可视区域外面的图片。默认为false。           

    echo.init({
    	offset:0,
    	throttle:0,
    	unload:true,
    	callback:funtion(element,op){
    
    	}
    });

     




      



    展开全文
  • 有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站...为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。...
  • 1、图片懒加载:在页面的未可视区域,可以添加一个滚动条事件,判断图片到浏览器顶端的距离如果小于到低端的距离,优先加载。...4、先加载一张不清晰的缩略图,以提高用户体验。(微博上好像会经常看到)...
  • VUE2组件懒加载浅析

    2018-11-02 10:31:49
     在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的...
  • vue这种单页面应用,如果我们不去做路由懒加载,打包之后的文件将会异常的大,就会造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,不利于用户体验,运用懒加载就可以将页面进行划分,需要的...
  • 懒加载和预加载

    2018-10-15 15:50:56
    一、懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将...
  • 懒加载的应用

    2018-10-24 20:01:57
    懒加载作用:  为了节省用户流量和提高页面性能,可以在用户浏览到当前资源(一般是图片)的时候,再对资源进行请求和加载。这样既对网站进行了性能优化,也提高用户体验懒加载插件使用方法介绍 1:首先...
  • 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。         简单的说,就是只有出现在屏幕中的图片系统才选择...
  • 在一些图片比较多的网站会用到 图片懒加载 技术,这项技术可以延迟加载图像,只当图片出现在我们看到的视图中才加载,它的好处是大大提高用户体验,节省不必要的资源浪费以及网站的性能提升等。下面介绍几种图片...
  • vue-router的懒加载

    2018-07-13 15:26:54
    vue2组件懒加载浅析 ... 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时...
  • 图片懒加载与预加载

    2017-10-13 14:24:14
    1.懒加载 认识一个新的东西,那么就从what、why开始。即想要了解图片懒加载技术,那么先了解什么是懒加载?为什么需要用到懒加载? 1.1什么是懒加载? 懒加载又称延迟加载。当访问一个页面的时候,需要先把img元素...
1 2 3 4 5 ... 20
收藏数 5,428
精华内容 2,171
关键字:

懒加载提高用户体验