如何为您的网站加载模糊的延迟图像？

Question

我有一个网站充满了图像，网站性能太差了。

我想使图像加载模糊，然后在滚动事件中，图像将双向加载。

我正在使用PHP和Zend框架

我正在寻找一个java脚本库或php函数来帮助我制作一个延迟加载图像，但我无法找到一个易于使用的图像，因为我不想替换所有图像。

我尝试了渐进式图像.js性能增强了一点，我的主要目标是使请求数量最少

是否有任何脚本与谷歌图像的工作方式相同

我看到了那个代码片段

 function imageLoaded(e) {

   updateImage(e.target, 'loaded');

 }

function imageError(e) {

  updateImage(e.target, 'error');

}

function updateImage(img, classname) {

  // Add the right class:

  img.classList.add(classname);

  // Remove the data-src attribute:

  img.removeAttribute('data-src');

  // Remove both listeners:

  img.removeEventListener('load', imageLoaded);

  img.removeEventListener('error', imageError);

}

window.addEventListener('load', () => {

  Array.from(document.getElementsByTagName('img')).forEach(img => {

    const src = img.getAttribute('data-src');

    if (src) {

      // Listen for both events:

      img.addEventListener('load', imageLoaded);

      img.addEventListener('error', imageError);

      // Just to simulate a slow network:

      setTimeout(() => {

        img.setAttribute('src', src);

      }, 2000 + Math.random() * 2000);

    }

  });

})

body {

  margin: 0;

  height: 100%;

}

.images {

  width: 100%;

  height: 100%;

  background: #000;

  display: flex;

  align-items: center;

  overflow-x: scroll;

}

.margin-fix {

    border-right: 1px solid transparent;

    height: 16px;

}

img {

  width: 16px;

  height: 16px;

  margin: 0 64px;

}

img.loaded {

  width: auto;

  height: 100%;

  margin: 0;

}

img.error {

  background: red;

  border-radius: 100%;

  /* You could add a custom "error" image here using background-image */

}

  <img

    src

    data-src="https://d39a3h63xew422.cloudfront.net/wp-content/uploads/2014/07/20145029/driven-by-design-the-incomparable-lancia-stratos-1476934711918-1000x573.jpg" />

  <img

    src

    data-src="https://car-images.bauersecure.com/pagefiles/76591/1752x1168/ford_racing_puma_01.jpg?mode=max&quality=90&scale=down" />

  <img

    src

    data-src="http://doesntexist.com/image.jpg" />

  <span class="margin-fix"></span>

</div>

Answer 1

现在，JavaScript是自重更常见。花时间解压缩，解析和编译 - 较大的图像有时可能会更快。https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/还有一些替代方法，比如只使用来加载视口中的东西。不需要javascript！也更有利于SEO。loading="lazy"<img&nbsp;src="image.jpg"&nbsp;loading="lazy"&nbsp;alt="..."&nbsp;/> <iframe&nbsp;src="video-player.html"&nbsp;loading="lazy"></iframe>还要看一下请求标头，看看他们正在请求什么。浏览器正在以一堆格式发送。WebP可以比jpg更小，并且仍然有损压缩看起来不错。accept-type它们还可能发送请求标头，以优先减小大小而不是速度，可能会为他们提供较小的图像，然后进行升级。Save-Data有些甚至发送客户端提示，如Accept-CH：DPR，宽度，视口宽度坦率地说，我已经在我的移动勇敢的浏览器中禁用了javascript，所以很多垃圾一直出现。cookie通知，广告，订阅，权限请求，所以我更喜欢如果你刚刚使用loading="lazy"您还可以查看srcset以获取响应式图像&nbsp;https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images