您的位置 首页 javascript教程

js实现图片预加载

什么是预加载:

当页面打开图片提前加载,并且缓存在用户本地,需要用到时直接进行渲染;在浏览图片较多的网页(百度图库,淘宝京东等),可以有更好的用户体验;

一张图片的预加载

var img=new Image();    img.addEventListener("load",loadHandler);    img.src="./img/1.jpg";    document.body.appendChild(img);    console.log(img.width);    function loadHandler(e){      console.log(img.width);//当前图片的原始宽度    }

上面代码中,图片还没加载完成打印图片的宽度时,图片宽度为0;只有等图片加载完成后并写入DOM树渲染后,才去触发load事件的回调函数,才能打印出图片的宽度;

加载多张图片时,要提前在本地进行缓存,下面要讲三种预加载多张图片的例子:

第一种:load预加载

加载100张图片,且图片名为1.jpg~100.jpg(下同);

var num=1;    var list=[];    loadImage();    function loadImage(){      var img=new Image();      img.addEventListener("load",loadHandler);      img.src="./img/"+num+".jpg";    }    function loadHandler(e){      list.push(this.cloneNode());//复制当前图片元素      num++;      if(num>100){console.log(list);return;}      this.src="./img/"+num+".jpg"; //修改地址继续后触发load事件    }

上面代码表示:

1、创建一张图片;

2、给这个图片增加事件侦听load;

3、加载完成后,将加载进来的图片复制一个新的,放在数组中;

4、修改num;如果num的值大于100停止执行,并且打印数组;

5、给这个图片的地址赋予一个新地址,因为改变图片的地址就会重新触发load,所以会继续进入loadHandler函数,不断加载,直到加载完成。

第二种:生成器函数实现预加载

function loadImage(src){    return new Promise(function(resolve,reject){      let img=new Image();      img.onload=function(){         resolve(img);//加载时执行resolve函数      }      img.onerror=function(){         reject(src+'这个地址错误');//抛出异常时执行reject函数      }      img.src=src;    })  }  function* fn(){    for(let i=1;i<100;i++){      yield loadImage("./img/"+i+".jpg");    }  }  let s=fn();  let value=s.next().value;   resume();  function resume(){    value.then(img=>{      console.log(img);//打印加载的图片标签      value=s.next().value;      if(value)resume();    });  }

以上代码表示:

1、执行生成器函数并且一次执行loadImage 函数;

2、在Promise中创建图片;

3、判断图片是否可以加载,加载成功执行Promise的回调函数resolve;

4、执行一次resume函数,并在函数里面执行Promise在resolved状态下的函数

5、反复执行s.next().value,直到全部图片加载完成;

第三种:async/await预加载图片

function loadImage(src){    let p=new Promise(function(resolve,reject){      let img=new Image();      img.onload=function(){//加载时执行resolve函数        resolve(img);      }      img.onerror=function(){        reject(src);      }      img.src=src;    })    return p;  }  async function fn(){    let arr=[];    for(let i=3;i<80;i++){      await loadImage(`./img/${i}-.jpg`).then(img=>{        arr.push(img);      });    }    return arr;  }  fn().then(list=>{    console.log(list);//打印图片数组  })

这种方法是ES6的方法用到了async和await将异步转换为阻塞式同步;

说明:

1、fn 这个函数使用async 表示这个函数是一个异步函数

2、这个函数中就可以使用await ,await作用就是让异步变为同步等待,异步变成了阻塞式等待

3、当异步全部完成时,再继续向后运行

4、async函数中的await后面只能跟的时Promise对象

5、async函数执行后返回的是一个Promise对象

推荐教程:js入门教程

以上就是js实现图片预加载的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:js实现图片预加载

文章地址:https://www.pyhw.net/31860_js%e5%ae%9e%e7%8e%b0%e5%9b%be%e7%89%87%e9%a2%84%e5%8a%a0%e8%bd%bd.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图