使用图像的最佳实践html jquery [关闭]

Posted 2021-04-12

我正在制作一个页面，显示包含图片的用户的所有帖子。有时每个导航（如facebook）检索100个帖子或更多。

我应该如何对待它们上的图像。它们是最小宽度的图片：480px以及它到达的长度。 （有时像肖像或风景，像facebook）

 POST1: Like my pic 1
   ----
  |    |
  |    |
   ----
 POST2: Like my pic 2
   ----
  |    |
  |    |
   ----
 POST3: Like my pic 3
   ----
  |    |
  |    |
   ----

    ...

优化页面的最佳方法是节省资源。并避免延迟或页面过载。

1）例如，如果我将480px-660px图片包装在480px-240px的溢出div容器中，它会使图像不完全显示，就像一个peview，我这样做可以节省资源吗？这是一个好习惯吗？

2）我正在使用一个懒惰的图像加载插件...这样做可以节省资源吗？

3）在单个页面中通过滚动加载显示100多个图像的最佳方法是什么？

4）在单个页面中加载图像的最佳做法是什么？

答案

我认为针对您的问题的最佳解决方案是为分辨率和质量较低的图片生成缩略图，然后图像尺寸较小（可选择提示），页面加载速度明显加快。

此外，您应该对页面进行分区并加载较小的块，例如每个负载10个帖子。这是你提到的懒惰负载。当用户几乎向下滚动到页面底部时，最好的解决方案是使用偏移参数通过AJAX请求加载更多帖子（您可以存储在javascript变量中）。请求完成后，您应该将数据附加到现有请求。

如果要加载完整图像，则应在thumbnail属性中保存图像的完整路径。这就是为什么当你上传文件时你应该​​保存原始文件和缩略图。例如：

<a href="#" class="show-preview" data-img="http://example.com/img/fullimage1.jpg">
    <img src="http://example.com/img/thumbimage1.jpg"/>
</a>

总结一下。如果您的网页加载的数据大小较小，这总是很好的做法。更大的数据仅在用户强制使用时加载，例如显示预览等。即使你应该将图像转换为更小的尺寸。如果图像大小为4MB且分辨率为4800x3200，在大多数情况下太大，那么您应该将其大小调整为1920x1080。