栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在HTML上快速加载许多图像

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在HTML上快速加载许多图像

您可能想要考虑将所有图像整合为一张大图像的拼版。这样,您只需要加载一个大图像,然后为每个场景重新定位即可。

或者,您可能还需要在实际使用之前预加载这150张图像。您可以使用JS数组存储Image对象,然后遍历该数组以获取图片。

var images = [];var expectLoaded = 150;for(var i = 0; i<expectLoaded;i++){    (function(i){        //new image object        var img = new Image();        //onload hander        img.onload = function(){ //after load, push it into the array images.push[img]; //and check if the all has loaded if(images.length === expectLoaded){     //preload done }        }        //start loading this image        img.src = //path to image[i];    },(i));}

循环会阻塞UI线程。JS是单线程的,这意味着代码以线性方式执行,一个接一个地执行。该循环语句之后的所有内容都将等待,直到循环完成。如果该循环需要很长时间…请喝杯咖啡。另外,由于您正在处理DOM,因此由于UI线程被阻止,您看不到更改。

但是有很多方法可以绕开它,其中一种方法是使用超时来延迟和排队代码,以便在JS不忙时执行。

function animate(frameNo){    //animate frame[frameNo];    if(frameNo < total_frames){    //make the UI breate in between frames        setTimeout(function(){   //so that changes reflect on the screen animate(++frameNo);  //then animate next frame        },200);}}//startanimate(0);


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/381697.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号