图像仅在检查元素时呈现

如何解决图像仅在检查元素时呈现

我正在尝试使用 javascript 来填充使用 JavaScript 的 Swiper JS 幻灯片。但是，当我检查页面时，似乎只有第一个图像加载，而另一个仅加载。我试图删除任何出现的“隐藏”类（基于对类似问题的回答），似乎没有帮助。

代码如下：

 <div class="py-1 swiper-container">
   <div id='slides' class="swiper-wrapper">
       <!-- Slides -->                      
   </div>
  ...

和注入图像的JS代码是：

       for (i = 0; i < media_urls.length; i++) {
          var st = '<div class="swiper-slide"> <img src='
          var end = ' class="h-56 rounded-xl object-cover w-full" /></div>'
          mediaHtml += (st + media_urls[i] + end);
        }
        slides.innerHTML = mediaHtml

图像加载（从外部 URL），似乎这个问题是图像文件大小。我怎样才能压缩从它们各自的 URL'x 获得的图像文件？

解决方法

尝试使用浏览器的网络工具并检查图像是否实际加载...因为它是一个滑块，其他 div 可能被隐藏，因为您的父 div 已溢出：隐藏，而不是因为它们有显示：无.