2017-02-17 18:16:04 Magneto7 阅读数 6340
  • Hadoop大数据从入门到精通

    Hadoop分布式文件系统(HDFS)和MapReduce的工作原理 如何优化Hadoop机群所需要的硬件配置 搭建Hadoop机群所需要考虑的网络因素 如何利用Hadoop配置选项进行系统性能调优 如何利用FairScheduler为多用户提供服务级别保障 Hadoop机群维护和监控 如何使用Flume从动态生成的文件加载数据到Hadoop

    54846 人正在学习 去看看 任亮

定义

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

实现

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

       }

   };

};


2018-01-16 14:49:11 T_shiyi 阅读数 243
  • Hadoop大数据从入门到精通

    Hadoop分布式文件系统(HDFS)和MapReduce的工作原理 如何优化Hadoop机群所需要的硬件配置 搭建Hadoop机群所需要考虑的网络因素 如何利用Hadoop配置选项进行系统性能调优 如何利用FairScheduler为多用户提供服务级别保障 Hadoop机群维护和监控 如何使用Flume从动态生成的文件加载数据到Hadoop

    54846 人正在学习 去看看 任亮

定义

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

实现

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




2018-03-21 22:48:55 qq_33745501 阅读数 1602
  • Hadoop大数据从入门到精通

    Hadoop分布式文件系统(HDFS)和MapReduce的工作原理 如何优化Hadoop机群所需要的硬件配置 搭建Hadoop机群所需要考虑的网络因素 如何利用Hadoop配置选项进行系统性能调优 如何利用FairScheduler为多用户提供服务级别保障 Hadoop机群维护和监控 如何使用Flume从动态生成的文件加载数据到Hadoop

    54846 人正在学习 去看看 任亮

一、什么是懒加载?

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

二、如何实现懒加载

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

	}
});

 




  



2018-05-05 17:17:12 AHRL__ 阅读数 5456
  • Hadoop大数据从入门到精通

    Hadoop分布式文件系统(HDFS)和MapReduce的工作原理 如何优化Hadoop机群所需要的硬件配置 搭建Hadoop机群所需要考虑的网络因素 如何利用Hadoop配置选项进行系统性能调优 如何利用FairScheduler为多用户提供服务级别保障 Hadoop机群维护和监控 如何使用Flume从动态生成的文件加载数据到Hadoop

    54846 人正在学习 去看看 任亮

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);
2017-12-12 15:49:20 qq_38209578 阅读数 2658
  • Hadoop大数据从入门到精通

    Hadoop分布式文件系统(HDFS)和MapReduce的工作原理 如何优化Hadoop机群所需要的硬件配置 搭建Hadoop机群所需要考虑的网络因素 如何利用Hadoop配置选项进行系统性能调优 如何利用FairScheduler为多用户提供服务级别保障 Hadoop机群维护和监控 如何使用Flume从动态生成的文件加载数据到Hadoop

    54846 人正在学习 去看看 任亮

本文主要介绍微信小程序的模拟图片懒加载,实现的原理是通过页面预加载图片(默认图),加载完成后再显示出来原图,而非真正意义上的懒加载(跟web的懒加载还有很大的差距),只是借此提高用户体验度。

多图片懒加载

1.xml页面

<block wx:for="{{list}}" wx:key="">
    <image class='relative width-100 mgb-20 fade_in' src='{{item.cover_url}}' mode='widthFix' style='display:none' bindload="_imgOnLoad" id='{{item.cover_url}}'></image>
     <view class='tag-bg {{item.checked?"tag-bg1":""}}'></view>
     <view class='tag-text fz-30 fwb'>{{item.type_name}}</view>
     <image class='relative width-100 mgb-20 fade_in {{item.loaded?"":"loading-img"}}' src='{{item.loaded?item.cover_url:item.url}}' mode='widthFix'></image>
 </block>

2.js页面

//ajax请求数据
onLoad: function () {
    var that = this
    var page = that.data.page
    wx.request({
      url: request_url,
      data: {
        'signature': signature,
        'page':1,
        'pageSize': 2
      },
      success: function (res) {
        let list = res.data.content
        for (var i = 0; i < list.length; i++) {
          list[i].url = "../../img/771.gif" //用json的格式创建url,作为加载过度图片
        }
        that.setData({
          list: list,
        })
      }
    })
  },

//监听图片加载页面
 _imgOnLoad: function (e) {
    // console.log(e)
    var loadedUrl = e.target.id
    let that = this
    let list = that.data.list
    for (var i = 0; i < list.length; i++) {
      if (list[i].cover_url == loadedUrl) {
        list[i].loaded = true
      }
      that.setData({
        list
      })
    }
  }

tips:上述数据加载的代码为get的方式,需要数据加密的则选择post的方式,有需要的可以留言。

vue 懒加载

阅读数 67

没有更多推荐了,返回首页