JS图片预加载三种实现方法解析

2024-02-28 13:43:18

预加载基本概念：当页面打开图片提前加载，并且缓存在用户本地，需要用到时直接进行渲染；在浏览图片较多的网页（百度图库，淘宝京东等），可以有更好的用户体验；

一张图片的预加载

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对象

以上就是三种预加载的方法，仅供参考；

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

利用CSS、JavaScript及Ajax实现高效的图片预加载

方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码代码如下: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background:
js 利用image对象实现图片的预加载提高访问速度

大量采用高解析度的图像的确可以让一个Web站点容光焕发.但同样也会造成站点访问速度下降--图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关.现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度. 一些浏览器试图通过在本地缓存中保存这些图片来解决此问题.这样一来可以顺序调用这些图片--但对于首次使用这些图片的时候仍然会存在延时.预装载就是一种在需要图片之前就将图片下载到缓存的技术.采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回
理解Javascript图片预加载

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.
js预加载图片方法汇总

本文实例汇总了js预加载图片方法.分享给大家供大家参考.具体分析如下: 1. 纯CSS: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; } #preload-03 { backgroun
多种js图片预加载实现方式分享

图片预加载有大体有几种方式 1.html标签或css加载图片显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验.一般最好在文档渲染完成以后再加载(使用window.onload等). 2.纯js实现预加载空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=
javascript预加载图片、css、js的方法示例介绍

预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -
javascript图片预加载完整实例

本文实例讲述了javascript图片预加载的方法.分享给大家供大家参考,具体如下: <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>图片预加载</tit
JS图片预加载三种实现方法解析

预加载基本概念:当页面打开图片提前加载,并且缓存在用户本地,需要用到时直接进行渲染:在浏览图片较多的网页(百度图库,淘宝京东等),可以有更好的用户体验: 一张图片的预加载 var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/1.jpg"; document.body.appendChild(img); console.log(img.width): functio
js图片预加载示例

js图片预加载简单示例复制代码代码如下: function loadImage(url, callback) { if(url!='null') { var img = new Image(); img.src = url; if(img.complete) { callback(img); } else { img.onload = function(){
前端必会的图片懒加载(三种方式)

目录一.何为懒加载
JS图片预加载 JS实现图片预加载应用

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
JS图片预加载插件详解

在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 2)区别: 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数.预加载可以说
JS实现图片预加载无需等待

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

图片预加载之无序预加载的效果图如下所示,如果大家感觉不错,请参考实现代码. 具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>PreLoading</title> <style> *{margin:0; padding:0; border:none; outline:0
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.
利用CSS、JavaScript及Ajax实现图片预加载的方法

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d

JS图片预加载三种实现方法解析

相关推荐

随机推荐