Question

我制作了一个图片库，但浏览器在呈现图片时滞后。一次渲染六个图像，但由于这些图像是从人们的手机或相机直接拍摄的全尺寸jpeg，因此它们通常很大并且导致很多滞后。我希望将图像以完整尺寸保存到服务器以减少质量损失，但是在渲染小型预览（仅约330px宽）时，这显然不是理想的。

我之所以想做什么（除非有更好的方法来解决这个问题;也许是服务器方面的PHP？）将图像大小减少到几百KB而不是几千客户端就在它们实际加载到页面之前。

我希望这是有道理的，我希望我不是真的很蠢，而且缺少一些非常明显的东西，这就是感觉。总是有帮助。

Answer 1

我建议您使用 Echo.js ，以避免所有图片加载问题

延迟加载仅通过加载元素所需的资源来工作 '会'在视野中，它会从服务器上获取请求，只需更改图像src即可自动执行属性。这也是一个有益的异步过程我们。

以下是使用Echo.js的 DEMO ，只有当它出现在视口上时才加载图片！

echo.init( {
            offset: 10,
            throttle: 550
        } );