Big Cartel Neat主题：如何移除首页特色产品图片加载模糊效果

Got it, let's get rid of that frustrating 4-second (or longer) blur on your Neat theme's featured product images. Here's exactly what you need to do:

Step 1: Access Your Theme's Code Editor #

• Log into your Big Cartel admin panel, head to the Design tab, then click Edit HTML/CSS to open the theme code editor.

Step 2: Remove the CSS Blur Styling #

First, we'll tackle the visual blur effect defined in the CSS:

• Open your theme's main CSS file (usually named style.css or theme.css).
• Use the search function (Ctrl/Cmd + F) to look for rules containing filter: blur() or class names like .blur, .lazy-image, or .product-image--blurred.
• You'll likely find something like this:

  .featured-products .product-image img {
    filter: blur(8px);
    transition: filter 0.3s ease;
  }
  .featured-products .product-image img.loaded {
    filter: blur(0);
  }
  

• Delete the filter: blur(8px); line from the initial image rule, or remove the entire rule that adds the blur. If you want to keep the transition just in case, you can leave that line, but the blur itself is what we're targeting.

Step 3: Disable the Delay Logic in JavaScript #

The 4-second delay is probably controlled by a JavaScript snippet that waits to remove the blur. Let's fix that:

• Open your theme's main JS file (usually script.js or theme.js).
• Search for code related to image loading, "blur", "loaded" class, or setTimeout with a 4000ms value (that's the 4-second delay).
• You might see code like this:

  document.addEventListener('DOMContentLoaded', function() {
    const productImgs = document.querySelectorAll('.featured-products img');
    productImgs.forEach(img => {
      img.classList.add('blur');
      img.onload = () => {
        setTimeout(() => img.classList.remove('blur'), 4000);
      };
    });
  });
  

• Either delete this entire block of code, or change the 4000 value to 0 so the blur removes instantly when the image loads. If there's a line adding a "blur" class to the images, remove that too.

Step 4: Check for Placeholder Image Blur (If Needed) #

Some themes use low-resolution placeholder images that look blurred until the full image loads. If that's the case:

• Open the featured-products.liquid or product.liquid template file.
• Look for image tags that use a data-src attribute (for the full image) and a regular src attribute (for the placeholder). For example:

  <img src="{{ product.image | resize: 20 }}" data-src="{{ product.image | resize: 800 }}" class="product-image">
  

• Replace the src value with the data-src value so the full image loads immediately instead of the blurred placeholder.

Step 5: Save and Test #

• Click the Save button in the code editor.
• Open your store's homepage in different browsers (Chrome, Firefox, Safari) to confirm the blur effect is gone for good.

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