如何管理，加速和预加载页面上的所有图像？

Question

好吧，这已经让我头疼了很长时间。我正在学习建立一个动态新闻/博客网站，从MySQL数据库中获取图像源。网站上有不同的部分，用不同的标签从数据库中的同一表中选择图像。我使用的大多数图像来自谷歌，雅虎等外部资源。所以我的问题是：

1. 你在哪里保存你的照片？我的意思是我应该使用外部来源的图像还是应该将图像保存在我的网站目录中？或者像一个驱动器一样的云服务？

2. 如何预加载网站上的所有图片？因为在我的网站上加载速度很慢？

3. 如何在加载图像之前显示空的潜水，就像Facebook一样。

4. 如果图像在其他网站上（我偷的图像）是否已优化？如果是，那么我还需要再次保存和优化吗？

Answer 1

1. 云服务会很昂贵，因为你会拥有大量的图片，外部的spurces是一个很大的数字。我将始终选择将它们放在我的网站目录中

     

   一旦他们将内容置于离线状态或阻止访问，您的网站就会被破坏。 - 曼努埃尔奥托

2. 我不知道jquery，但是：preload images with jquery

3. Javascript，DOM。底部的示例完全可以调整您想要显示图像的方式。
4. 我会说：不要

这只是一个例子。

document.body.addEventListener("load", myFunction);

function myFunction() {
    document.getElementById("allMyImages").style= "background-image: src("myImage.jpg");";
}

当网页完全加载时，它会触发myFunction。

Answer 2

1. 将您自己的图片保存在自己的服务器上。不要依赖外部资源来始终启动/运行。但是，请注意使用受版权保护的图像/图形。

2. 您可以使用javascript在文档完全加载时隐藏和显示您的页面。如果您的图像太多，可以选择lazyload，这样就不会对用户连接造成太大压力。

3. 指定容器的宽度和高度，以便在图像加载时保持比例

4. 我猜测输出已经过优化，所以“偷来的”输出也应该