圖像推遲腳本而不是懶惰的圖像腳本導致未定義的偏移量？

爲了改善我網站的pagespeed，Pagespeed Insight建議使用延期圖片而不是懶惰的jquaery圖片。我根據從另一個話題recommandations做了一個嘗試圖像推遲腳本而不是懶惰的圖像腳本導致未定義的偏移量？

我使用Opencart的2，我試圖改變以下列方式代碼：

我創建了一個小型的1x1像素的GIF圖片並將其作爲image/imgdefer.gif上傳。

我在我的header.tpl模板頭部放置了一個JavaScript文件，用於所有頁面。該腳本完全符合我在stackoverflow（上面的sse鏈接）和varvy.com上找到的說明。使用的JavaScript是：

<script> 
function init() { 
var imgDefer = document.getElementsByTagName('img'); 
for (var i=0; i<imgDefer.length; i++) { 
if(imgDefer[i].getAttribute('data-src')) { 
    imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); 
} } } 
window.onload = init; 
</script>

我換成由文章中的腳本提出的腳本main.tpl模板懶惰圖像的代碼，所以

現有懶惰的圖片腳本：

<a href="<?php echo $submenu_item['href']; ?>"> 
    <img width="<?php echo $submenu_item['image_width']; ?>" height="<?php echo $submenu_item['image_height']; ?>" class="lazy" src="<?php echo $submenu_item['dummy']; ?>" data-src="<?php echo $submenu_item['image']; ?>" alt="<?php echo $submenu_item['name']; ?>"/> 
</a>

改爲

<a href="<?php echo $submenu_item['href']; ?>"> 
    <img width="<?php echo $submenu_item['image_width']; ?>" height="<?php echo $submenu_item['image_height']; ?>" src="image/imgdefer.gif" data-src="<?php echo $submenu_item['image']; ?>" alt="<?php echo $submenu_item['name']; ?>"/> 
</a>

在應用上述第1至第3點的代碼更改之後，我收到第115行中vq2_system_modification_system_library_response.php中缺少偏移的通知。下面列出了相關代碼段。這是第一條if語句（if（count（$ info）== 3 & & $ info 1 [0] =='src'）{）它會產生錯誤。

preg_match_all('/<img[^>]+>/i', $this->output, $result); 

$img = array(); 
foreach($result[0] as $img_tag) { 
    preg_match_all('/(width|height|src)=("[^"]*")/i',$img_tag, $img[$img_tag]); 
} 
foreach ($img as $k => $info) { 
    if (count($info) == 3 && $info[1][0] == 'src') { 
    //if (curl_init(str_replace('"', '', $info[2][0]))) { 
     $imgfile = str_replace('"', '', $info[2][0]); 
     $imgfile = str_replace(HTTP_SERVER, DIR_IMAGE . '../', $imgfile); 
     $imgfile = str_replace(HTTPS_SERVER, DIR_IMAGE . '../', $imgfile); 
     if (file_exists($imgfile)) { 
      $image_info = getImageSize(str_replace('"', '', $imgfile)); 
      $k = trim($k, '/>'); 
      $k = trim($k, '>'); 
      $this->output = str_replace($k, ($k . ' ' . $image_info[3]), $this->output); 
     } 
    } 
}

我做了一些模擬和我的印象中，$info[1][0]有時給0作爲值（空數組？）。

是否有建議可以幫助我，並指出我在正確的方向？這是實現延遲圖像的正確方法嗎？

UPDATE：我施加新手的下面這似乎非常合乎邏輯的建議，但相同的錯誤「通知：未定義偏移量：0在vqmod \ vqcache \上線115 VQ2-system_modification_system_library_response.php」仍然存在。只有當我從header.tpl中刪除點2的腳本文件時，錯誤消失了。

難道是我的延期圖片只會在稍後（太晚）開始加載，並且點4中的代碼在請求時無法正確執行？根據Google頁面速度的建議，點4中的代碼用於爲頁面上的所有圖像提供圖片和高度屬性？

如何解決？我已經在這個問題上打破了我的頭幾天，所以任何非常感謝。

我必須補充，在這個頁面上還有其他標籤 - 不是延遲加載 - 但我已經一一刪除了所有這些標籤，無論我刪除哪個img標籤，通知警告仍然存在... 問候，

SabKo

來源

2016-12-31 SabKo

這不是空的實際上它的失敗是由於這樣的事實：$info[1][0]等於"width"它是如此，因爲正則表達式。先按先後順序先掃描，先把width屬性先放到第一位（[0]）。注意在正則表達式內的資格順序。並不重要，即。在大多數情況下，'/(width|height|src)=("[^"]*")/i的輸出與'/(src|height|width)=("[^"]*")/i的輸出完全相同。標籤中屬性的順序什麼是您的主題字符串中的第一個，通過測試將首先得到。

所以，如果你改變這樣

<img src="image/imgdefer.gif" width="<?php echo $submenu_item['image_width']; ?>" height="<?php echo $submenu_item['image_height']; ?>" data-src="<?php echo $submenu_item['image']; ?>" alt="<?php echo $submenu_item['name']; ?>"/>

標籤相關的代碼，然後它會正常工作我guess.In情況下，你不想改變這個順序，你也可以編輯像if (count($info) == 3 && $info[1][2] == 'src')

條件

來源

2016-12-31 03:12:58 Viney

圖像推遲腳本而不是懶惰的圖像腳本導致未定義的偏移量？

回答

相關問題