使用 Javascript 延遲加載圖像

Question

我有一個面向最終用戶的應用程序，用戶可以在其中上傳圖像。 當用戶上傳大量圖像時，我的應用程序變慢。

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

並根據設備和圖像大小，准備圖像。

現在我想用普通的 javascript 代碼/流程/技術做同樣的事情。

有人可以指導我嗎？

Answer 1

我可能有點題外話，但我會說提供圖像的調整大小版本會更好，這會減少客戶端和服務器的帶寬。

有許多庫可以調整圖像大小或僅使用本機 php 函數。

我更喜歡的程序是：-> 圖像上傳-> 圖像保存-> 圖像調整大小並使用新的尺寸名稱保存-> 然后取決於用戶選擇的內容，您向他們發送准確的圖像

示例：

上傳 Image1.jpg（1000x1000 像素）

-> 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;

$cache 是我調整大小后保存的文件。

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

干杯！