javascript - 加载缓慢的图像和加载开始时出现绿色问题

Question

我希望你能帮助我解决这个问题。我正在为我的一位朋友摄影师开发图像展示。我是新手，所以我试图找到简单的方法。然而，在加载的第一秒，图像是绿色的，然后它带有真实的颜色。另一个问题是加载速度很慢，有时图像显示有时不显示。我完全迷失了如何解决这些问题。

我使用 bootstrap、js Macy 作为 gid 和 fslightbox 作为灯箱。我仅通过 HTML loading="lazy" 使用延迟加载

此图像在开始时加载绿色

<header class="row">
  <div class="container my-5 mt-md-5 mb-md-2">
    <div class="col-12 my-auto">
      <div id="results1" class="results">
        <img alt="Diana among the humans photography by Konrad Winkler." class="lazy" loading="lazy" src="images/Key images a web/Diana-among-the-humans.jpg" data-src="images/Key images a web/Diana-among-the-humans.jpg" />
      </div>
    </div>  
  </div>  
</header>

这些在开始时加载绿色然后非常缓慢地加载

<div class="container">
  <div class="d-flex flex-row justify-content-between mb-5">
    
    <div class="col-xs-6 col-sm-5 col-md-5 col-lg-4">
      <div class="thumbnail gallery1">
        <a href="1moments.html">
          <img alt="Moments of my Life, by Konrad Winkler Photographer." class="align-items-start gallery img-fluid lazy"  loading="lazy" src="images/Key images a web/01-Moments-of-my-Life.jpg"/> 
        
          <div class="text-center caption pt-3">
            <h5 class="">Moments of my Life</h5>
          </div>
        </a> 
      </div>
    </div>

    <div class="col-xs-6 col-sm-5 col-md-5 col-lg-4">
      <div class="thumbnail gallery1">
        <a href="2diana.html">
          <img alt="Collection Diana among the Humans, by Konrad Winkler Photographer" class="align-items-start gallery img-fluid lazy" loading="lazy"  src="images/Key images a web/02-Diana-among-the-Humans.jpg" />
         
          <div class="text-center caption pt-3">
            <h5 class="">Diana among the Humans</h5>
          </div>
        </a>
      </div>
    </div>

    <div class="col-xs-6 col-sm-5 col-md-5 col-lg-4">
      <div class="thumbnail gallery1">
        <a href="3boys.html">
          <img class="align-items-start gallery img-fluid lazy" loading="lazy"  src="images/Key images a web/04-Bruce-W.jpg" alt="Collection The Trouble with Boys, by Konrad Winkler Photographer">
        
          <div class="text-center caption pt-3">
            <h5 class="">The Trouble with Boys</h5>
          </div>
        </a>
      </div>
    </div>

网格和灯箱

<!-- Grid -->
<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
<script src="js/macy/dist/macy.js"></script>
<script>
    var masonry = new Macy({
        container: '#macy-container',
        trueOrder: false,
        waitForImages: false,
        useOwnImageLoader: false,
        debug: true,
        mobileFirst: true,
        columns: 3,
        margin: {
            y: 16,
            x: '2%',
        },
        breakAt: {
            1200: 3,
            940: 3,
            520: 2,
            400: 1
        },
    });
</script>

<!-- lightbox -->
<script src="js/fslightbox.js"></script> 
<script> 
    // opens content 2
    fsLightboxInstances['lightbox'].open(1);

    // closes the lightbox
    fsLightboxInstances['lightbox'].close();

    // refreshes the lightbox when new content is added
    refreshFsLightbox();

    fsLightboxInstances['lightbox'].props.onOpen = () => console.log('Lightbox open!');
    fsLightboxInstances['lightbox'].props.onClose = () => console.log('Lightbox close!');
    fsLightboxInstances['lightbox'].props.onInit = () => console.log('Lightbox init!');
    fsLightboxInstances['lightbox'].props.onShow = () => console.log('Lightbox show!');

    // disables the local storage
    fsLightboxInstances['gallery'].props.disableLocalStorage = true;

    // sets the video poster
    fsLightboxInstances['gallery'].props.videosPosters = ['1.jpg'];

    // sets the max width/height of the Youtube video
    fsLightboxInstances['gallery'].props.maxYoutubeDimensions = { width: 1920, height: 1080 };

    // sets the space between slides
    fsLightboxInstances['gallery'].props.slideDistance = 0.5;

    // loads only current source
    fsLightboxInstances['gallery'].props.loadOnlyCurrentSource = true;

    // exists fullscreen on close
    fsLightboxInstances['gallery'].props.exitFullscreenOnClose = true;

    fsLightboxInstances['gallery'].props.thumbs = ['/images/example-thumbnail.jpg'];
</script>

标签： javascripthtmllazy-loadingloadinglightbox