使用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的懒惰加载图像

回答

相关问题