电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析

瀏覽:91日期:2024-05-09 15:36:10

預(yù)加載基本概念:當(dāng)頁面打開圖片提前加載,并且緩存在用戶本地,需要用到時(shí)直接進(jìn)行渲染;在瀏覽圖片較多的網(wǎng)頁(百度圖庫,淘寶京東等),可以有更好的用戶體驗(yàn);

一張圖片的預(yù)加載

var img=new Image(); img.addEventListener('load',loadHandler); img.src='http://www.hdgsjgj.cn/bcjs/img/1.jpg'; document.body.appendChild(img); console.log(img.width); function loadHandler(e){ console.log(img.width);//當(dāng)前圖片的原始寬度 }

上面代碼中,圖片還沒加載完成打印圖片的寬度時(shí),圖片寬度為0;只有等圖片加載完成后并寫入DOM樹渲染后,才去觸發(fā)load事件的回調(diào)函數(shù),才能打印出圖片的寬度;

加載多張圖片時(shí),要提前在本地進(jìn)行緩存,下面要講三種預(yù)加載多張圖片的例子:

第一種:load預(yù)加載

加載100張圖片,且圖片名為1.jpg~100.jpg(下同);

var num=1; var list=[]; loadImage(); function loadImage(){ var img=new Image(); img.addEventListener('load',loadHandler); img.src='http://www.hdgsjgj.cn/bcjs/img/'+num+'.jpg'; } function loadHandler(e){ list.push(this.cloneNode());//復(fù)制當(dāng)前圖片元素 num++; if(num>100){console.log(list);return;} this.src='http://www.hdgsjgj.cn/bcjs/img/'+num+'.jpg'; //修改地址繼續(xù)后觸發(fā)load事件 }

上面代碼表示:

1、創(chuàng)建一張圖片;

2、給這個(gè)圖片增加事件偵聽load;

3、加載完成后,將加載進(jìn)來的圖片復(fù)制一個(gè)新的,放在數(shù)組中;

4、修改num;如果num的值大于100停止執(zhí)行,并且打印數(shù)組;

5、給這個(gè)圖片的地址賦予一個(gè)新地址,因?yàn)楦淖儓D片的地址就會(huì)重新觸發(fā)load,所以會(huì)繼續(xù)進(jìn)入loadHandler函數(shù),不斷加載,直到加載完成。

第二種:生成器函數(shù)實(shí)現(xiàn)預(yù)加載

function loadImage(src){ return new Promise(function(resolve,reject){ let img=new Image(); img.onload=function(){ resolve(img);//加載時(shí)執(zhí)行resolve函數(shù) } img.onerror=function(){ reject(src+’這個(gè)地址錯(cuò)誤’);//拋出異常時(shí)執(zhí)行reject函數(shù) } 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);//打印加載的圖片標(biāo)簽 value=s.next().value; if(value)resume(); }); }

以上代碼表示:

1、執(zhí)行生成器函數(shù)并且一次執(zhí)行l(wèi)oadImage 函數(shù);

2、在Promise中創(chuàng)建圖片;

3、判斷圖片是否可以加載,加載成功執(zhí)行Promise的回調(diào)函數(shù)resolve;

4、執(zhí)行一次resume函數(shù),并在函數(shù)里面執(zhí)行Promise在resolved狀態(tài)下的函數(shù)

5、反復(fù)執(zhí)行s.next().value,直到全部圖片加載完成;

第三種:async/await預(yù)加載圖片

function loadImage(src){ let p=new Promise(function(resolve,reject){ let img=new Image(); img.onload=function(){//加載時(shí)執(zhí)行resolve函數(shù)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);//打印圖片數(shù)組 })

這種方法是ES6的方法用到了async和await將異步轉(zhuǎn)換為阻塞式同步;

說明:

1、fn 這個(gè)函數(shù)使用async 表示這個(gè)函數(shù)是一個(gè)異步函數(shù)

2、這個(gè)函數(shù)中就可以使用await ,await作用就是讓異步變?yōu)橥降却惒阶兂闪俗枞降却?/p>

3、當(dāng)異步全部完成時(shí),再繼續(xù)向后運(yùn)行

4、async函數(shù)中的await后面只能跟的時(shí)Promise對(duì)象

5、async函數(shù)執(zhí)行后返回的是一個(gè)Promise對(duì)象

以上就是三種預(yù)加載的方法,僅供參考;

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 智能监控-安防监控-监控系统安装-弱电工程公司_成都万全电子 | 环境模拟实验室_液体-气体控温机_气体控温箱_无锡双润冷却科技有限公司 | 安徽华耐泵阀有限公司-官方网站 安德建奇火花机-阿奇夏米尔慢走丝|高维|发那科-北京杰森柏汇 | 金属检测机_金属分离器_检针验针机_食品药品金属检探测仪器-广东善安科技 | 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 复盛空压机配件-空气压缩机-复盛空压机(华北)总代理 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 黄石妇科医院_黄石东方女子医院_黄石东方妇产医院怎么样 | 深圳天际源广告-形象堆头,企业文化墙,喷绘,门头招牌设计制作专家 | 小港信息港-鹤壁信息港 鹤壁老百姓便民生活信息网站 | 广州印刷厂_广州彩印厂-广州艺彩印务有限公司 | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 直流大电流电源,燃料电池检漏设备-上海政飞 | 氧氮氢联合测定仪-联测仪-氧氮氢元素分析仪-江苏品彦光电 | 浙江栓钉_焊钉_剪力钉厂家批发_杭州八建五金制造有限公司 | 无压烧结银_有压烧结银_导电银胶_导电油墨_导电胶-善仁(浙江)新材料 | 阳光1号桔柚_无核沃柑_柑橘新品种枝条苗木批发 - 苧金网 | 电液推杆生产厂家|电动推杆|液压推杆-扬州唯升机械有限公司 | 大型果蔬切片机-水果冬瓜削皮机-洗菜机切菜机-肇庆市凤翔餐饮设备有限公司 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 欧景装饰设计工程有限公司-无锡欧景装饰官网 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 立式壁挂广告机厂家-红外电容触摸一体机价格-华邦瀛 | 福尔卡(北京)新型材料技术股份有限公司| 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 家用净水器代理批发加盟_净水机招商代理_全屋净水器定制品牌_【劳伦斯官网】 | 线材成型机,线材折弯机,线材成型机厂家,贝朗自动化设备有限公司1 | 丹佛斯压力传感器,WISE温度传感器,WISE压力开关,丹佛斯温度开关-上海力笙工业设备有限公司 | 宿舍管理系统_智慧园区系统_房屋/房产管理系统_公寓管理系统 | CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 防水套管厂家-柔性防水套管-不锈钢|刚性防水套管-天翔管道 | 化工ERP软件_化工新材料ERP系统_化工新材料MES软件_MES系统-广东顺景软件科技有限公司 | 河南凯邦机械制造有限公司 | 四川职高信息网-初高中、大专、职业技术学校招生信息网 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 | 头条搜索极速版下载安装免费新版,头条搜索极速版邀请码怎么填写? - 欧远全 |