如何优化无缝图像网格?CSS还是Jquery?图像优化

How to optimize seamless image grid? CSS or Jquery? Image optimization?

本文关键字：优化 图像 网格 CSS Jquery 还是 何优化      更新时间：2023-09-26

我只是一个简单的用户体验设计师，正在加强他的代码技能，所以请原谅我的无知和糟糕的代码。

我正在重新启动我的投资组合网站。最初的无缝网格是使用类似Masonry的JQuery插件构建的。不过它非常缓慢。http://jack-a-lope.net/Illustration.html

我决定使用Masonry重建它，但担心性能可能仍然很差，所以我找到了一个全CSS的解决方案，我希望它能更快地加载。https://css-tricks.com/seamless-responsive-photo-grid/

我在另一个网站上寻求帮助，但被告知问题不是插件速度慢，而是我正在预加载3mb的图像。我已经调整了所有图像的大小，并尽我所能对它们进行了优化，删除了相当大的内存，但加载速度仍然很慢。我做错了什么？为什么大型网站可以加载这么多图像，但这个代码却让人窒息？我还需要做其他事情来优化它吗？这只是在页面上粘贴加载屏幕的问题还是什么？

[EDIT:]所有图像都已压缩和优化。图像实际上加载得相当快，问题是我得到了一个FOUC，而JS需要时间来重新格式化图像等。

您正在预加载3MB的图像，因为这是图像权重的总和，这不是问题，这是正常行为。

使用图像压缩工具可以看到一些改进，但如果你认为页面会增加图像的数量，你应该考虑无限滚动的Lazy Load，我使用过这个jQuery插件，它非常适合静态页面。

编辑：

如果你不会有很多图像，那么你可以使用延迟加载，并在加载后在图像中淡入淡出。我最喜欢的两个jquery插件是：

  • 惰性负载（最常用）
  • 揭开面纱（最小且快速）

要优化图像，最好使用Photoshop"Save for the Web"选项。但是，是的，除了图片大小，这一点非常重要，还有很多因素会影响网站的加载速度。

您应该：

  • 在不影响质量的情况下尽可能缩小图像的大小
  • 使用良好的主机
  • 最小化并组合CSS&JS文件
  • 最小化请求
  • 利用缓存
  • 使用CDN
相关文章：