javascript实现图片预加载和懒加载

本文实例为大家分享了javascript实现图片预加载和懒加载的具体代码,供大家参考,具体内容如下

预加载

预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取。举个栗子, 比如一个网站的开场动画, 这些动画是由很多图片组成的, 假如不预先加载好, 那就会造成动画不流畅产生闪动白屏。图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,保证了图片快速、无缝地发布,使用户在浏览你网站内容时获得更好的用户体验。

//这里我把图片数量写死了,而且对图片名也有要求必须是阿拉伯数字后缀为jpg
//下面注释还会介绍另一种方法,两者选一个就行,当然也可以把你的方法留在评论区共同学习
function preload() {
  for(var i=1;i<13;i++){
    var img=[];
    img[i]=new Image();//创建一个img对象
    img[i].src="img/"+i+".jpg"
  }
}
/*function preload() {
    img1=new Image();//创建一个img对象
    img1.src="xxx/xxx/xxx.jpg"//图片地址
    img2=new Image();
    img2.src="xxx/xxx/xxx.jpg"
    img3=new Image();
    img3.src="xxx/xxx/xxx.jpg"
    img4=new Image();
    img4.src="xxx/xxx/xxx.jpg"
    ......
  }
}*/

// 定义了一个函数,带一个参数fun
function addLoadEvent(fun) {
  // 把已经加载完成的函数赋值给oldnload变量
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = fun;
  } else {
    window.onload = function() {
      // 这里执行了刚才赋值变量的函数
      oldonload();
      // 这里是执行了传进来的func参数
      fun();
    }
  }
}
addLoadEvent(preload());
/*
 oldonload是自己定义的变量,并给他赋值了onload事件,onload 事件会在页面或图像加载完成后立即发生。
 onload是在页面和图像加载后执行的事件,但在实际使用中若多次给onload赋值,则onload会被后复制的方法给覆盖,也就意味着onload只会执行最后赋值的方法。
 fun()是传入的参数,此处fun()就是preload()。
这段代码表达的含义就是:
  如果(typeof window.onload != 'function')也就是说window.onload还没有被赋值,就直接把它赋值为fun。
  否则,说明有程序先对其赋值了,那么在页面加载完成之后,应该先执行现有函数再执行自己的新的fun。
  即,此段代码保证了onload中原有加载的方法执行(且先执行),防止fun方法执行(图片预加载)时将其覆盖。
*/

这里可以看到图片已经经加载出来了

懒加载

可以有效避免同一时间浏览器需要加载过多的图片,同时开启过多的http请求,导致网页加载速度变慢。

/*
先将照片路径存放在一个自定义属性中,src中存放一个正在加载的gif,等图片到了显示区域时再用js将自定义属性替换到src里,图片显示出来。
将所有需要按需加载的图片获取到一个集合,滚动滚动条的时候判断哪些图片出现在了可视区域内,出现了就执行一个加载的操作。
加载完成后就将这个图片移出集合或者数组中去,最后数组内需要加载的图片就会越来越少。
*/
<div>
  <img src="img/lode.img" data-src="img/1.img" class="lazylode">
  <img src="img/lode.img" data-src="img/2.img" class="lazylode">
  <img src="img/lode.img" data-src="img/3.img" class="lazylode">
  <img src="img/lode.img" data-src="img/4.img" class="lazylode">
  <img src="img/lode.img" data-src="img/5.img" class="lazylode">
  <img src="img/lode.img" data-src="img/6.img" class="lazylode">
  <img src="img/lode.img" data-src="img/7.img" class="lazylode">
  <img src="img/lode.img" data-src="img/8.img" class="lazylode">
</div>
<script>
 var lazylode=document.querySelectorAll('.lazylode');
//获取的是类数组对象,只有item()方法和length属性没有数组对象的方法
var imgArr=Array.prototype.slice.call(lazylode);
//将类数组转化为数组
lazylodeImg();
//要执行的懒加载方法,一开始应该先执行一次懒加载,让显示区域内的图片加载出来
var timer;
window.addEventListener('scroll',function(){
  clearTimeout(timer);//节流
  timer=setTimeout(function(){
    lazylodeImg();//屏幕滚动执行懒加载
  },100);
},false)
function lazylodeImg(){
  for(var i=0;i<imgArr.length;i++){
    if(isVisibleArea(imgArr[i])){//判断是否在可视区域内
      imgArr[i].src=imgArr[i].getAttribute('data-src');
      //修改src为自定义的属性
      imgArr.splice(i,1);//将数组中已加载的图片移除数组
      i--;
      //因为从数组中删除了下标为1的数,那么原来下标为2的数就进位为1了
    }
  }
}
function isVisibleArea(el){
  var rect=el.getBoundingClientRect();
  //获取元素距离可视区域的top,left等值
  return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight;
  //都为真才会返回true
}
</script>

不光是图片,js,css文件等都可以按需加载,创建一个script或者link标签,让后在里面添加要呈现的效果,添加到body或者header里面,执行完滚动事件后js或者css文件已经加载完成,移除屏幕滚动事件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS实现页面数据懒加载

    页面数据懒加载.Div移动到可视区域再去ajax加载内容. 最近有需求做页面的多个table用于加载数据,但是用户浏览页面的时候不需要一次将页面所有的东西加载出来,比如页面上3个table就占满了,用户点进去第一眼也就只能看到3个.为了防止一次加载拖慢了页面的速度,所以之后的table我们要懒加载.即该table移动到了可视区域再去异步请求加载数据. 以下为目前实现的方法: <!-- page lazyloading --> <script> $(function(){ // 设置

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • 快速实现JS图片懒加载(可视区域加载)示例代码

    js懒加载图片 如何提高网页加载速度?在网页中有许多img标签,这些标签就是图片,其属性src则是指向服务器地址,当浏览器从上往下读取到src标签中的地址时,浏览器就会开启线程,加载这张图片.而并不是等到整张页面都解析完成才加载图片.我们要做的就是加载用户可视范围内的图片. js懒加载图片的目的 1.网页优化,提高网页加载速度 2.页面优化友好,提高SEO收录与排名 3.提高用户体验,减少服务器压力 实例代码如下: <!DOCTYPE html> <html lang="en&

  • 深入研究jQuery图片懒加载 lazyload.js使用方法

    lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min

  • javascript 事件加载与预加载

    通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: 复制代码 代码如下: window.onload = function(){ func1(); func2(); func3(); //更多加载事件------ } 但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了! 复制代码 代码如下: //后台代码 <script type="

  • 基于jquery的图片懒加载js

    以下是实现代码(基于jquery): 复制代码 代码如下: function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img

  • JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

  • 基于javascript实现图片懒加载

    一.定义 图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页.可以减少请求数或者延迟请求数,优化性能.  二.呈现形式 [1]延时加载,使用setTimeout或setInterval进行加载延迟,如果用户在加载前就离开,自然就不会进行加载. [2]条件加载,符合某些条件或者触发了某些条件才开始异步加载. [3]可视区域加载,仅仅加载用户可以看到的区域,这个主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样能保证用户下拉时图片正好接上

  • js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    看个例子: 复制代码 代码如下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; I

  • JavaScript实现图片懒加载(Lazyload)

    懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 原理 将页面中的img标签src指向一张小图片或者src为空,然后定义data

随机推荐