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

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 src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

还要看一下请求标头，看看他们正在请求什么。

• 浏览器正在以一堆格式发送。WebP可以比jpg更小，并且仍然有损压缩看起来不错。accept-type

• 它们还可能发送请求标头，以优先减小大小而不是速度，可能会为他们提供较小的图像，然后进行升级。Save-Data

• 有些甚至发送客户端提示，如Accept-CH：DPR，宽度，视口宽度

---

坦率地说，我已经在我的移动勇敢的浏览器中禁用了javascript，所以很多垃圾一直出现。cookie通知，广告，订阅，权限请求，所以我更喜欢如果你刚刚使用loading="lazy"

您还可以查看srcset以获取响应式图像 https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images