順序加載圖片方法

fsmStudy 發(fā)布于2019-08-23 15:34 / 341人閱讀

摘要：普通圖片加載普通圖片加載順序加載圖片方法順序加載圖片方法方法方法方法方法執(zhí)行完成之后才走下一步

普通圖片加載

//普通圖片加載
var imglist = ["https://avatars3.githubusercontent.com/u/34082804?s=460&v=4","./img/2.jpg","https://avatars3.githubusercontent.com/u/34082804?s=460&v=4","https://github.githubassets.com/images/search-key-slash.svg","./img/2.jpg","https://avatars3.githubusercontent.com/u/34082804?s=460&v=4"];
loadImg(imglist);

function loadImg(imglist){
    var imgarr = [];
    var curimg = 0;
    var body = document.getElementsByTagName("body");

    for(var i =0;i
順序加載圖片方法1
//順序加載圖片方法1、
function loadImg(imglist){
    var imgarr = [];
    var curimg = 0;
    var body = document.getElementsByTagName("body");

    for(var i =0;i
promise方法
//promise方法

var imglist = ["https://avatars3.githubusercontent.com/u/34082804?s=460&v=4","./img/2.jpg","https://avatars3.githubusercontent.com/u/34082804?s=460&v=4","https://github.githubassets.com/images/search-key-slash.svg","./img/2.jpg","https://avatars3.githubusercontent.com/u/34082804?s=460&v=4"];

var body = document.getElementsByTagName("body");

function loadimg(i){
    var img = new Image();
    img.src = imglist[i];
    img.style.width = "200px";
    img.id = i;
    body[0].appendChild(img);
    return new Promise(function(resolve,reject){
                img.onload = function(){
                    console.log("show    "+this.id)
                    resolve(i+1)
                };
            })
}

var a = Promise.resolve(0);

var i=0;
while(i
async 方法
//async 方法
async function loadImages(imglist){
    for(var i =0; i

GPU云服務(wù)器云服務(wù)器順序加載 linux 加載順序 java打亂順序方法 ie8 js加載順序

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102260.html

相關(guān)文章

圖像延遲加載 && 列表圖順序加載

摘要：此外，跟蹤尚未延遲加載的元素?cái)?shù)量，以及取消綁定滾動(dòng)事件處理程序的繁瑣工作將由開(kāi)發(fā)者來(lái)完成。圖像延遲加載列表圖順序加載的組件已經(jīng)開(kāi)源啦有興趣的同學(xué)可以查看使用起來(lái)非常簡(jiǎn)單圖片延時(shí)加載十分重要，尤其是對(duì)于移動(dòng)端用戶。從理論上來(lái)看，圖像延遲加載機(jī)制十分簡(jiǎn)單，但實(shí)際上卻有很多需要注意的細(xì)節(jié)。此外，有多個(gè)不同的用例均受益于延遲加載。首先，我們來(lái)了解一下在 HTML 中延遲加載內(nèi)聯(lián)圖像。延遲加載...

ghnor 2019-05-23 17:33 評(píng)論0 收藏0
JavaScript中的圖片處理與合成(二)

摘要：通過(guò)這套流程，我們便能添加任意的圖片圖層并合成圖片。下篇文章，我們會(huì)繼續(xù)介紹下文字的合成和幾何圖片的合成，敬請(qǐng)期待 JavaScript中的圖片處理與合成(二) 引言本系列分成以下4個(gè)部分: 基礎(chǔ)類(lèi)型圖片處理技術(shù)之縮放、裁剪與旋轉(zhuǎn)(傳送門(mén))；基礎(chǔ)類(lèi)型圖片處理技術(shù)之圖片合成；基礎(chǔ)類(lèi)型圖片處理技術(shù)之文字合成；算法類(lèi)型圖片處理技術(shù)；上篇文章，我們介紹了圖片的裁剪/旋轉(zhuǎn)與縮放，接...

hersion 2019-08-22 15:07 評(píng)論0 收藏0
說(shuō)走就走的性能優(yōu)化之旅

摘要：雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開(kāi)發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁(yè)性能優(yōu)化，就繞不開(kāi)雅虎軍規(guī)。頁(yè)面加載前置，后置，首屏無(wú)關(guān)的不加載，圖片懶加載，精簡(jiǎn)之類(lèi)的，都是在網(wǎng)頁(yè)加載層面上的優(yōu)化，可以算作請(qǐng)求都結(jié)束了之后做的東西。同時(shí)達(dá)到了最初的目的。雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開(kāi)發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁(yè)性能優(yōu)化，就繞不開(kāi)雅虎軍規(guī)。優(yōu)化規(guī)則&&原文，仔細(xì)閱讀這些規(guī)則，可以總結(jié)到3個(gè)方面： Http層面上的優(yōu)化...

U2FsdGVkX1x 2019-08-30 13:08 評(píng)論0 收藏0
說(shuō)走就走的性能優(yōu)化之旅

摘要：雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開(kāi)發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁(yè)性能優(yōu)化，就繞不開(kāi)雅虎軍規(guī)。頁(yè)面加載前置，后置，首屏無(wú)關(guān)的不加載，圖片懶加載，精簡(jiǎn)之類(lèi)的，都是在網(wǎng)頁(yè)加載層面上的優(yōu)化，可以算作請(qǐng)求都結(jié)束了之后做的東西。同時(shí)達(dá)到了最初的目的。雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開(kāi)發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁(yè)性能優(yōu)化，就繞不開(kāi)雅虎軍規(guī)。優(yōu)化規(guī)則&&原文，仔細(xì)閱讀這些規(guī)則，可以總結(jié)到3個(gè)方面： Http層面上的優(yōu)化...

waltr 2019-08-20 12:23 評(píng)論0 收藏0
說(shuō)走就走的性能優(yōu)化之旅

摘要：雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開(kāi)發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁(yè)性能優(yōu)化，就繞不開(kāi)雅虎軍規(guī)。頁(yè)面加載前置，后置，首屏無(wú)關(guān)的不加載，圖片懶加載，精簡(jiǎn)之類(lèi)的，都是在網(wǎng)頁(yè)加載層面上的優(yōu)化，可以算作請(qǐng)求都結(jié)束了之后做的東西。同時(shí)達(dá)到了最初的目的。雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開(kāi)發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁(yè)性能優(yōu)化，就繞不開(kāi)雅虎軍規(guī)。優(yōu)化規(guī)則&&原文，仔細(xì)閱讀這些規(guī)則，可以總結(jié)到3個(gè)方面： Http層面上的優(yōu)化...

Galence 2019-08-01 15:56 評(píng)論0 收藏0