JS Swiper：延迟加载问题+图像标题在淡入淡出效果下效果不佳

问题描述

基于此滑动器（https://github.com/nolimits4web/swiper），我创建了具有褪色效果，懒惰的laod的全屏图像滑块，并为其添加了图像标题。我只具有html的基本技能，所以请与我交流:)在下面，您可以看到我的代码：

<style>
    .swiper-container {
        min-width: 100%;
        min-height: 100%;
        }
    .swiper-slide {
        width: 100vw;
        height: 100vh;
        position: relative;
        background-size: auto;
        object-fit: cover;
        }

       .swiper-slide img {
        width: 100vw;
        height: 100vh;
        display: flex; 
        position: relative;
        background-size: auto;
        object-fit: cover;
        }

  .image_caption {
         position: absolute;
         left: 40px;
         bottom: 25px;
         z-index: 5;
        }

</style>

<div class="swiper-container">
    <picture alt="" class="swiper-slide">
        
        <source media="(max-width: 600px)"
        data-srcset="images/Lorem.jpg"
        />
        
        <source media="(max-width: 1024px)"
        data-srcset="images/Lorem_mobile.jpg"
        />
        
        <img class="swiper-lazy"
        data-src="images/Lorem_low-res.jpg"
        />
        
        <div class="image_caption">Lorem Ipsum</div> 
        
    </picture>
</div>  

<script src="js/swiper.js"></script>

<script>
        var swiper = new Swiper('.swiper-container',{
            preloadImages: false,lazy: true,loop: true,effect: 'fade',autoplay: {
            delay: 3000,disableOnInteraction: true,},keyboard: {
             enabled: true,onlyInViewport: false,navigation: {
             nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',});
</script>

我的目标是创建一个全屏滑块，其中的图像标题会在出现新图像时发生变化。同样，通过实现lazyload，我希望低分辨率图像首先加载，并在实际图像准备就绪时被替换。此外，在移动设备上显示的图像也不同。

现在我有2个问题：

1：低分辨率图像先被加载，但不被完整分辨率图像代替。我不确定是否是因为图像的大小？移动图像效果很好。但是，我想知道这里如何在图像中放置移动低分辨率图像，因为该图像与台式机版本不同。还是我在这里想念东西？

1. 图像标题随幻灯片一起移动，但不幸的是由于效果的淡淡，图像标题总是重叠了一点。例如，当我将动画切换为crossFade时，效果很好。我认为问题出在淡入淡出。但是我找不到解决方法。我添加了图片标题重叠的屏幕截图。

Screenshot_image-caption

如果您中有人可以帮助修复它，我将不胜感激。如果不清楚，请随时提出。正如我提到的，我对所有这些都还很陌生：）非常感谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）