Question

我遇到的问题是，当滑块位于断点较少的图像上时，如果不拖动浏览器窗口而调整大小，则不会加载其余图像。

您可以通过将浏览器的窗口更改为500px以下，加载页面然后全屏而不拖动窗口来查看此内容，因为您可以看到其他3个图像未加载。谁知道如何解决这个问题？

var mySwiper = new Swiper('.swiper-container', {
   slidesPerView: 4,
   preloadImages: false,
   lazy: true,
   watchSlidesVisibility: true,
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
   pagination: {
     el: '.swiper-pagination',
     type: 'bullets',
     clickable: true,
   },
   breakpoints: {
    500:{
        slidesPerView: 1,
    }
   }
});

.swiper-slide div {
  padding: 0 15px;
  text-align: center;
}

.swiper-slide span {
  display: block;
  border: 1px solid #000;
  padding: 100px 20px;
}

.swiper-slide span img {
  height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><div><span><img data-src="https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2016/04/falsecolorearth.jpg?itok=D6yJ3YPt" class="swiper-lazy"></span></div></div>
    <div class="swiper-slide"><div><span><img data-src="https://www.satimagingcorp.com/galleryimages/rapideye%20oahu%20hawaii.jpg" class="swiper-lazy"></span></div></div>
    <div class="swiper-slide"><div><span><img data-src="https://www.nasa.gov/images/content/571329main_pia14313-full_full.jpg" class="swiper-lazy"></span></div></div>
    <div class="swiper-slide"><div><span><img data-src="https://spaceplace.nasa.gov/review/3d-gallery/saturn-cassini-dione-fulldisk.en.jpg" class="swiper-lazy"></span></div></div>
    <div class="swiper-slide"><div><span><img data-src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2002/04/satellite_image_of_the_caribbean_sea_taken_by_the_meris_instrument_on_board_envisat_24_march_2002/9170022-5-eng-GB/Satellite_image_of_the_Caribbean_Sea_taken_by_the_MERIS_instrument_on_board_Envisat_24_March_2002.jpg" class="swiper-lazy"></span></div></div>
       
  </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
 
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
</div>

具有断点和延迟加载的Swiper滑块在调整窗口大小时不会加载图像

0 个答案: