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

    定义

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

    实现

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




    展开全文
  • 目录: 懒加载的意义(为什么要使用懒加载) 原理 代码 在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下。...这样子对于页面加载性能上会有很大的提升,也提高用户体验。 原理 将页面
  • 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,...
  • 定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候...惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定...

    定义

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

    实现

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

    判断是否存在于可视区

    浏览器视口高度
    待加载资源距离视口顶端位置
    通过以上两点即可判断图片是否位于可视区内。

    
    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://mp.weixin.qq.com/s/W8qAWARdyacrTW07NBPXFA

    展开全文
  • 定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候...惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定...

    定义

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

    实现

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

    判断是否存在于可视区

    浏览器视口高度
    待加载资源距离视口顶端位置
    通过以上两点即可判断图片是否位于可视区内。

    
    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://mp.weixin.qq.com/s/W8qAWARdyacrTW07NBPXFA

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

    定义

    图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。

    惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。

    实现

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

    判断是否存在于可视区

    浏览器视口高度

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

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

    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')

    }

    之后获取图片的真实地址

    ...

    var src = elem.dataset.src;

    把真实地址赋给图片

    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);

    }

    };

    };

    展开全文
  • 懒加载提高页面性能

    千次阅读 2018-03-21 22:48:55
    可以防止页面一次性加载完所有的图片,用户等待时间较长,影响用户体验。二、如何实现懒加载 1. 将页面中的图片的src属性设置为空,并将src属性真正的值存放在自定义属性data-originnal(自定义属性以data-开头)。...
  • 1、图片懒加载:在页面的未可视区域,可以添加一个滚动条事件,判断图片到浏览器顶端的距离如果小于到低端的距离,优先加载。...4、先加载一张不清晰的缩略图,以提高用户体验。(微博上好像会经常看到)...
  • viewpager懒加载

    2018-09-20 22:50:02
    什么是懒加载:viewpager会默认预加载当前界面左右的fragment,为了防止其他需要预加载并且不可见的fragment与当前可见的fragment在加载数据时抢占cpu和内存资源,预加载的fragment只有当其可见时才去加载数据,这样...
  • 懒加载

    2016-11-28 20:14:48
    网站性能优化的插件,提高用户体验。 页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。 第二:使用场合  涉及...
  • 图片懒加载

    2020-12-06 23:00:33
    ** 对于图片过多的页面,为了加速页面的加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载,等到滚动到可视区后再去加载,这样子对于页面加载性能上会有很大的提升,也提高用户体验。...
  • 懒加载懒加载(Load On Demand)也称之为延迟加载,是一种按需加载加载组件的数据获取方法,当用户滚动页面的时候自动获取更多的数据,这样不仅缩短了系统响应时间,也提升了系统性能,更提高用户体验感同时最大...
  • vue 懒加载

    2019-05-06 13:59:20
    像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以...
  • 懒加载懒加载(Load On Demand)也称之为延迟加载,是一种按需加载加载组件的数据获取方法,当用户滚动页面的时候自动获取更多的数据,这样不仅缩短了系统响应时间,也提升了系统性能,更提高用户体验感同时最大...
  • JavaScript中的预加载和懒加载

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

    2020-09-08 22:07:19
    学习目标: 掌握原生图片懒加载 学习内容: 1、 掌握原生图片懒加载 2、 分析js代码 3、 搜索熟悉陌生单词用法 4、 掌握懒加载 ...懒加载是一种优化网页性能的一种方式,它极大的提高用户体验。举
  • vue懒加载

    2021-01-12 17:59:44
    提高用户体验 import Vue from "vue"; import VueRouter from "vue-router"; import login from "./login"; import store from "../store/"; import commodityManage from "./commodityManage"; import selfAgent ...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 242
精华内容 96
关键字:

懒加载提高用户体验