Javascript HTML、CSS优化页面上的图像过多

我创建了一些餐厅网站，有一个包含不同食物的菜单页面。问题是上述页面在第一次加载时加载速度太慢。首先，我认为当你进入菜单页面时，所有具有适当图像的项目（大约200个图像）都在加载，这是问题的根本原因，但随后我设置了JS触发器，单击页面加载上的某个菜单项，只加载6个图像。然而，这没有帮助。所以，请描述一些优化我的页面以快速加载的方法

---

提前多谢！：

根据图像的大小，即使只加载6个图像，也会很慢。 考虑调整图像大小以优化速度。

您可以使用Gimp/Photoshop或本网站：

[编辑]

不要在生产中使用所有这些分开的文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">

HTML中的CSS 你真的需要那么多JS文件吗

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>

不要以这种方式使用，缩小所有，并确保您使用的是缩小版的jquery，而不是jquery.js

请在此处查看：

尝试一下Grunt，以帮助您实现代码的自动化和小型化：

---

或者直接使用此网站：

您应该优化所有图像： 您可以为此使用联机工具： 压缩jpeg 网址：https://compressjpeg.com/

压缩png 网址：https://compresspng.com/

你可以上传很多图片，这将压缩图片文件夹

---

优化所有图像后，站点速度将提高。

使用java脚本ajax并为列表创建分页。i、 e您将从数据库中获取数据，并且一次仅显示10个值。对于图像。。选择一些常见的图像并创建精灵。。这两件事对你帮助最大。在你的每一个项目中

您可以尝试这样做，它可以压缩图像以优化页面内容。但是，对于任何与JS相关的问题，您都应该分享您的代码，还有哪些问题需要优化？文章中没有可优化的代码。@Teemu我的意思是，任何避免加载图像的方法。我不能发布代码，因为它太大和不合适。正如你所看到的，没有代码，我们只能推测什么可能是错误的。你必须做你自己的研究来缩小代码的范围。例如，删除脚本，直到页面加载速度加快，这样您就会发现脚本正在减慢页面速度。如果所有的脚本都被删除了，页面仍然很慢，请删除其他源链接，如CSS样式表，在某个时候，您会找到原因。@Teemu好的，我试试看，thanksEach 6幅图像的重量约为80 KB，足以减缓加载吗？网站是什么？它在线吗？还有别的事情让情况变得更糟。将您的代码发布在此处或代码笔链接alfreda.com.az中-进入nav上的菜单，单击您调用过多CSS文件和JS库的任何项目。尽量缩小所有的尺寸，只放一个/