如何提升Cube Portfolio Gallery的图片加载速度？

Absolutely, implementing lazy loading (only loading images when they enter the viewport) is a perfect way to speed up your Cube Portfolio Gallery—those displayType and displayTypeSpeed settings control animation transitions, not the actual image loading behavior, so that’s why adjusting them didn’t move the needle. Let’s walk through how to set this up properly:

Step 1: Adjust Your Image Markup #

First, modify your portfolio item images to separate the lightweight placeholder (loaded initially) from the actual high-res image. Replace the src attribute with a tiny placeholder, and store the real image URL in a data-src attribute:

<div class="cbp-item">
  <a href="#" class="cbp-caption">
    <div class="cbp-caption-defaultWrap">
      <!-- Use a tiny optimized placeholder or solid-color SVG -->
      <img src="placeholder-tiny.jpg" data-src="your-highres-image.jpg" alt="Image description">
    </div>
    <div class="cbp-caption-activeWrap">
      <div class="cbp-l-caption-body">
        <h3>Your Image Title</h3>
      </div>
    </div>
  </a>
</div>

Step 2: Disable Cube Portfolio's Default Preloading #

Cube Portfolio preloads all images on page load by default. Turn this off by adding the preload: false option when initializing the plugin:

$('#your-portfolio-container').cubeportfolio({
  // Your existing config (layoutMode, gap, etc.)
  preload: false, // Disable built-in full preloading
  layoutMode: 'grid',
  // Other custom settings...
});

Step 3: Add Lazy Loading with Intersection Observer #

Use the native Intersection Observer API to load images when they enter (or are about to enter) the viewport. This is efficient and plays nicely with Cube Portfolio's dynamic layout:

document.addEventListener('DOMContentLoaded', function() {
  // Set up the observer
  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const targetImg = entry.target;
        // Swap placeholder with real image
        targetImg.src = targetImg.dataset.src;
        // Stop observing once the image loads
        imageObserver.unobserve(targetImg);
      }
    });
  }, {
    rootMargin: '75px' // Load images 75px before they enter the viewport
  });

  // Observe all portfolio images with data-src
  document.querySelectorAll('.cbp-item img[data-src]').forEach(img => {
    imageObserver.observe(img);
  });
});

Step 4: Handle Dynamic Content (If Needed) #

If your portfolio loads items dynamically (e.g., via filters or pagination), use Cube Portfolio's appended callback to re-observe new images after they’re added:

$('#your-portfolio-container').cubeportfolio({
  // Existing config...
  preload: false,
  callbacks: {
    appended: function() {
      // Observe newly added images that haven't been loaded yet
      document.querySelectorAll('.cbp-item img[data-src]:not([src*="your-highres-image"])').forEach(img => {
        imageObserver.observe(img);
      });
    }
  }
});

Bonus: Add a Smooth Loading Effect #

For a better user experience, add a fade-in transition when images finish loading. Add this CSS:

.cbp-item img {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.cbp-item img.loaded {
  opacity: 1;
}

Then update the Intersection Observer callback to add the loaded class once the image loads:

targetImg.onload = function() {
  targetImg.classList.add('loaded');
};
targetImg.src = targetImg.dataset.src;

Key Notes #

• Placeholder Optimization: Use ultra-small, compressed placeholders (e.g., 20px width) or solid-color SVGs to keep initial page weight as low as possible.
• Browser Compatibility: Intersection Observer works in all modern browsers. For older browsers like IE11, add a lightweight polyfill if needed.
• Testing: Use your browser’s DevTools (Network tab) to confirm images only load when they enter the viewport.

内容的提问来源于stack exchange，提问作者john zuh