我的项目中有Owl Carousel 2.3.4，Pug是JS模板引擎。我需要在台式机和移动版中显示不同的图像。图像的URL是从数据库动态添加的（promoSliderImgs中的3个图像和promoSliderMobile中的3个URL）。现在，我已经制作了两个根据屏幕大小显示的轮播（我在＃owl-1和＃owl-2的css中使用@media）和所有作品。我还看到页面加载时全部加载了6张图像，这不好。

是否有与我不同的解决方案？

由于数据库图像，我无法使用'background-image'css选项（我只能在此.pug文件中获取它们。）

这是我的cover.pug

  #owl-1.cover-photo.owl-carousel.owl-theme.owl-loaded
    each file in page.promoSliderImgs
      img(src=file.url)
  #owl-2.cover-photo.owl-carousel.owl-theme.owl-loaded
    each file in page.promoSliderMobile
      img(src=file.url)

这是main.js文件中的轮播代码（这只是标准）：

$('.owl-carousel').owlCarousel({
    center: true,items: 1,loop: true,autoplay: true,autoplaySpeed: 400,autoplayTimeout: 2000,autoplayHoverPause: true,dots: true,animateOut: 'fadeOut',mouseDrag: false,});