问题描述
我在此页面上运行良好，但问题在于加载时间。我原本以为哦，这是延迟加载，但是这样做会使轮播变得结结巴巴。
问问您如何补救，js？我的另一个想法是将模式放在单独的页面上并调用它们，但是我不确定该怎么做。
我要在这里发布我大约有x 15的东西，其余的放在小提琴里
https://jsfiddle.net/cso9yz21/
<article class="installs_article">
<div class="col-12 installs_title">
<h1>Installs</h1>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 installs_row">
<div class="col albumThumb">
<div class="card w-100 mx-auto">
<a href="#" data-toggle="modal" data-target="#hyundaiElantraModal">
<img src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/thumb.jpg" class="card-img-top" alt="2016 Hyundai Elantra">
<div class="card-body">
<h5 class="card-title">2016 Hyundai Elantra Install</h5>
<p class="card-text">Double Din Radio,Amp,Subwoofer,Custom Box & Backup Camera</p>
</div>
</a>
</div>
</div>
<div class="modal fade" id="hyundaiElantraModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg modal-installs" role="document">
<div class="modal-content">
<div class="modal-header">2016 Hyundai Elantra Install
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="hyundaiElantraCarousel" class="carousel slide" data-interval="false" data-wrap="false">
<ol class="carousel-indicators">
<li data-target="#hyundaiElantraCarousel" data-slide-to="0" class="active"></li>
<li data-target="#hyundaiElantraCarousel" data-slide-to="1"></li>
<li data-target="#hyundaiElantraCarousel" data-slide-to="2"></li>
<li data-target="#hyundaiElantraCarousel" data-slide-to="3"></li>
<li data-target="#hyundaiElantraCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/fuse.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/dash.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/amprack.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/trunk.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/backupcam.jpg" alt="Fifth slide">
</div>
</div>
<a class="carousel-control-prev" href="#hyundaiElantraCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#hyundaiElantraCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer mx-auto text-center">
<i>Head Unit: Kenwood DDX-6704s <br> Amp: Rockford Fosgate Prime r500-x1d <br> Subwoofer: JL Audio 10W3v3 <br> Custom Sealed Box <br> Steering Wheel Control Install Mod <br> Backup Camera: Coolint CT-107B</i>
</div>
</div>
</div>
</div>
</div>
</article>https://www.caraudioinc.com/installs
解决方法
您可以在图像标签中使用原生loading="lazy"，例如：
<img loading="lazy" class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/backupcam.jpg" alt="Fifth slide">
但是请确保为图像添加width和height属性，以使内容不会移位
还要确保要支持的浏览器支持此功能。
https://caniuse.com/#search=lazyloading
,我建议压缩所有图像，像Tinypng这样的网站就可以完成工作。
,以下是一些加快图片访问量网站的方法：
- 在本地调整图像大小
调整图像大小，使其完全符合网站上的要求。并在不使用CSS / HTML代码将其发送给浏览器之前，在服务器上调整其大小。
- 使用正确的图像格式
JPG，PNG，GIF和SVG图像格式在网络上最常见。 WebP是当今相对流行的相对较新的格式：
-
JPG-由于它们具有巨大的彩色托盘，因此非常适合照片或复杂的图像。 JPG有损，在高对比度区域，边缘不好。
-
PNG-最适合徽标或颜色少且透明度高的高质量图像。他们的类型： PNG-8-尺寸较小，但调色板颜色有限（256种颜色）。 PNG-24-对调色板没有限制，但是文件大小会更大。
-
GIF-流行几年前，主要用于动画制作。 GIF的调色板只有256种颜色，并且尺寸往往会更大。不要使用它们。
-
WebP-它们结合了JPG，PNG和GIF的优点，尺寸缩小了30％，并且在近75％的现代浏览器中受支持。
-
SVG-矢量图形，尺寸小巧，在视网膜屏幕上显示精美。 SVG也可以在HTML中内联使用，这将保存HTTP请求。它们也可以作为常规图像插入。
鉴于巨大的性能优势，您应尽可能以SVG或WebP格式交付图像。
- 正确保存图像
如果图像编辑器中有用于将图像保存为Web的选项，请使用它。例如，在Adobe Photoshop中，必须使用另存为Web 选项。它优化了可以在线显示的图像。
也将图像保存为渐进质量，因为它将使图像以波浪形逐渐消失，直到完全加载为止。这将改善用户体验，因为在加载完整图像时屏幕上会发生一些事情，而不是空白。
- 使您的网站具有响应力
您可以通过HTML中的两种方式使图像响应。
- 使用
srcset标签的sizes和<img>属性
<img src="big.jpg"
srcset="small.jpg 450w,medium.jpg 960w,big.jpg 1500w"
sizes="(max-width: 552px) 450px,(max-width: 1062px) 960px,1500px"
alt="Demo Image" />
首先，我们指定了src属性，如果浏览器不支持srcset属性，这是一个后备选项。
第二，在srcset内，我们定义了3个图像源，以逗号分隔。但是，在图片来源之后，我们定义了图片的实际宽度（以像素为单位），并附加了w，这很重要，因为浏览器现在在首先下载图片之前便知道了图片的实际大小。
最后，在sizes内部，声明要下载特定图像的视口宽度。
- 使用
<picture>和<source>标签
<picture>
<source media="(max-width: 552px)" srcset="small.jpg">
<source media="(max-width: 1062px)" srcset="medium.jpg">
<img src="big.jpg" width="1500" height="400" alt="Demo Image">
</picture>
在这里，我们使用media中的<source>属性来严格确定在特定设备宽度上必须使用哪个图像浏览器。浏览器使用的第一个来源的规则与其他来源匹配，而忽略其余的规则。
最后，我们使用了常规的<img>标签，如果浏览器不支持<picture>元素或使用源定义的所有规则均失败，则默认使用该标签。
主要区别在于，当我们使用<picture>浏览器时，不会自行决定。
- 加载较少的资源
即使进行了所有优化，加载太多图像也势必会降低您的网站速度。在某些情况下，我们可以避免使用图片。
例如，我们可以使用CSS创建按钮，渐变和其他高级元素，而不是图像。
您可以使用的另一项更重要的技术是图像的延迟加载。延迟加载延迟了不需要立即加载的图像。通常，在视口上用户看不见的任何图像都可以稍后加载，即在进入视口时加载。
诸如jQuery Lazy之类的JS库可用于实现延迟加载。
- 使用优质的CDN进行图像传递
CDN（内容交付网络）是一组全局分布的缓存/代理服务器。他们将您的图像缓存在服务器上。当用户从您的网站请求图像时，CDN不会从您的服务器获取该图像，而是从距离该用户最近的节点提供该图像。这样可以减少加载图像所需的往返时间。
在Wikipedia上检查Notable CDNs的此列表。
选择CDN时，请确保它支持HTTP / 2。 HTTP / 2是一种用于在Web上传递内容的新协议，它可以通过使用多路复用，报头压缩和服务器推送等技术来缩短页面加载时间，从而大大缩短加载时间。
在Wikipedia上检查HTTP/2 supporting CDN的此列表。选中此Video on Youtube，以查看HTTP / 2和HTTP / 1.1之间的性能差异