使用Javascript的懶惰加載圖像

我有一個應用程序供最終用戶使用，用戶可以在其中上傳圖像。當用戶上傳大量圖像時，我的應用程序變慢。使用Javascript的懶惰加載圖像

我們還在一個模塊中使用了Angular JS Lazy加載圖像，該模塊會生成不同大小的圖像。 https://github.com/afklm/ng-lazy-image

並基於設備和圖像大小準備圖像。

現在我想用純JavaScript代碼/流程/技術做同樣的事情。

Can Anybody guide me？

來源

2016-04-04 Curious_k.shree

我可能會略微偏離主題，但我認爲最好是提供圖像的大小調整後的版本，這對於客戶端服務器來說都是較小的帶寬。

有很多圖書館來調整圖像大小或只使用本機php功能。

我喜歡的程序是： - >圖片上傳 - >圖片保存 - 調整大小後保存新的尺寸名稱&>圖片 - >則取決於用戶的選擇是什麼，你給他們，準確的圖像

例：

上傳Image1.jpg（1000×1000像素）

-> gets Saved to '/images/Image1.jpg' 
-> User request a (let's say) 200x200 size of that image 
-> The script will resize to 200x200 and save it as Image1_200x200.jpg 
(which will have the real file size of 200x200, 
so the server will send the 200x200 image and not the 1000x1000 (original image)

這樣，你節省了很多，更快地爲圖像，然後通過你能想到的懶加載圖像這是折以下的。

我個人使用WideImage，還有Zebra_Image。

我用WideImage的代碼是（有緩存）

/* Merge, to get full path */ 
    $fullpath = $Path . $Filename; 
    if (!file_exists($cache_dir)) { 
     $old = umask(0); 
     mkdir($cache_dir . DS, 0775); 
     umask($old); 
    } 


    /* cache file */ 
    $cache = $cache_dir . DS . $Filename; 
/* Create Cache */ 
     if (!file_exists($cache) || $recreate === true) 
     WideImage::load($fullpath)->resize($Width, $Height, 'outside')->crop(
       'center', 'center', $Width, $Height)->saveToFile($cache, $Quality); 


    /* Return Cache filepath */ 
    return $cache;

的$緩存文件I調整大小後保存。

這在某種程度上超出了主題，但我認爲這會有所幫助。

乾杯！

來源

2016-04-04 15:25:53 Emad

使用Javascript的懶惰加載圖像

回答

相關問題