利用javascript下載批量文件以防止瀏覽器超時的好方法

因此，我開始在這裏使用fancybox庫。利用javascript下載批量文件以防止瀏覽器超時的好方法

我的最終目標是創建一個通過下載存儲的Cloudfront在Amazon S3圖像的畫冊。現在它被設置爲有一個主頁面，每個頁面都有一個圖像。點擊該圖片並打開相冊。

問題是，如果我的相冊有75個項目或任何大數目，瀏覽器將超時並崩潰或導致我的計算機內存不足（我在本地運行，因爲我開發它）。

這裏是一些示例代碼

function photoDL(){ 
 
    var num = 0; 
 
    var batch = 0; 
 
    for(i = 1; i < 62; i++){ 
 
    var myphoto = 'https://MYCODEFRONTSTUFF/'+i+'.jpg'; 
 
    var albumpic = new Array(); 
 
    albumpic.push(myphoto); 
 

 
    for(batch = 1; batch < 5; batch++){ 
 
     $.fancybox.open([ 
 
     { 
 
      src : albumpic[num], 
 
      opts : { 
 
      caption : 'First caption' 
 
      } 
 
     }, 
 
     ], { 
 
     loop : false, 
 
     hash : "album3" 
 
     }); 
 
     setTimeout(photoDL(), 10000); 
 
     num += 1; 
 

 

 

 
    } 
 

 

 
    } 
 
}

我知道有在那裏的一些東西，不看的權利。我想我可以將SetTimeout設置爲緩衝區，並給它一些時間下載每個圖像，但這沒有幫助。它仍然試圖一次下載它們。我正在玩創造批次的想法，但打到了死衚衕。任何幫助都非常讚賞。

來源

2017-06-10 The Jay

如果您的瀏覽器在崩潰之前無法加載75張圖片，那麼會出現問題 - 圖片大小是多少？ –

1-2MB之間/圖片 –

你的代碼循環61次，並且在每個循環內部，你有內部循環運行5次。在每個內部循環中 - 你打開新的fancyBox實例（在現有的實例上），然後調用主循環！

因此，你打開fancyBox 243次，並在10000毫秒後，你打開58,806新的實例，你想知道爲什麼你的瀏覽器崩潰？ :)

來源

2017-06-10 08:39:22 Janis

這只是最新的迭代。原始代碼沒有循環，我承認對JS/jQuery更新，所以對我的困惑和無知表示歉意。什麼會是更好的執行方法？ –

我不明白如何手動下載和打開fancybox是相關的。那麼，你只是想創建一組圖像，並將其展示在fancyBox中？然後你的更新代碼看起來很好。 – Janis

謝謝。我正在製造一個錯誤的世界，我承認它。 –

謝謝你的見解，我設法找出了這一個。引入固定的代碼

function photoDL(batch, url, ftype){ 
 
    var num = 0; 
 
    var fArr = []; 
 
    var albumpic = new Array(); 
 
    var fboxOpen = ''; 
 
    for(i = 1; i < batch; i++){ 
 
    var myphoto = url+i+ftype; 
 
    albumpic[i] = myphoto; 
 
    //console.log(albumpic[i]); 
 
    var fboxOpen = 
 
    { 
 
     src : albumpic[i], 
 
     opts : { 
 
     caption : 'First caption' 
 
     } 
 
    }; 
 
    fArr[i] = fboxOpen; 
 

 
    } 
 
    fArr.shift(); 
 
    var jsonString = JSON.stringify(fArr); 
 
    console.log(jsonString); 
 

 

 
    $.fancybox.open(
 
    fArr 
 
    , { 
 
     loop : false, 
 
     hash : "album3" 
 
    }); 
 
    }

有點慢，但它肯定努力！

來源

2017-06-10 11:14:56

利用javascript下載批量文件以防止瀏覽器超時的好方法

回答

相關問題