我有一個(gè)充滿圖像的網(wǎng)站，但網(wǎng)站性能非常糟糕。我想讓圖像加載模糊，然后在滾動(dòng)事件時(shí)圖像將被雙向加載。我正在使用 PHP 和 Zend 框架我正在尋找?guī)椭抑谱餮舆t加載圖像的 java 腳本庫或 php 函數(shù)，但我找不到一個(gè)易于使用的，因?yàn)槲也幌胧謩?dòng)替換所有圖像我嘗試了progressive-image.js 性能提高了一點(diǎn)，我的主要目標(biāo)是使請(qǐng)求數(shù)量最少有沒有和谷歌圖片一樣的腳本我看過那個(gè)代碼片段 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>