javascript - 使用 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 是我调整大小后保存的文件。

这在某种程度上超出了主题，但我认为这会有所帮助。

干杯!