Image defer script вместо ленивого скрипта изображения приводит к неопределенному смещению?

Question

Чтобы улучшить страницы своего веб-сайта, Pagespeed Insight предлагает использовать отложенные изображения вместо ленивых изображений jquaery. Я сделал попытку по recommandations из другой темы

Reference Topic on stackoverflow

Я использую OpenCart 2, и я попытался изменить код следующим образом:

1. Я создал небольшой 1x1 пиксель GIF и загрузили это как изображение/imgdefer.gif.

2. Я разместил javascript-файл в начале моего шаблона header.tpl, который используется для всех страниц. Скрипт полностью соответствует инструкциям, которые я нашел в 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> 
   

3. Я заменил ленивый код изображения в шаблоне 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> 

4. После применения изменений кода в пунктах 1-3 выше я получаю уведомление о недостающем смещении в файле vq2_system_modification_system_library_response.php в строке 115. Ниже приведена соответствующая часть кода. Это первая команда 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); 
        } 
       } 
   } 
   

5. Я сделал некоторые моделирования и у меня сложилось впечатление, что $info[1][0] иногда дают 0 в качестве значения (пустой массив?).

Есть ли предложения, которые могут помочь мне и указать мне правильное направление? Это правильный способ реализации отложенных изображений?

UPDATE: Я применил предложение Мцыри, ниже которого, казалось, очень логично, но та же ошибка «Примечание: Undefined смещение: 0 в vqmod \ vqcache \ vq2-system_modification_system_library_response.php на линии 115» сохраняется. Только когда я удалю файл сценария из пункта 2 из моего header.tpl, ошибка исчезла.

Возможно ли, что мои отложенные изображения начнут загружаться позже (слишком поздно) и что код в пункте 4 не может быть выполнен надлежащим образом в момент его запроса? Код в пункте 4 используется для предоставления атрибутов изображения и высоты для всех изображений на странице в соответствии с рекомендациями google pagespeed?

Как решить? Я уже несколько дней ломаю голову над этой проблемой, поэтому любое сугушество будет очень оценено.

Я должен добавить, что есть и другие теги - не ленивая загрузка - на этой странице, но я удалил все эти теги по одному и независимо от того, какой img-тэг я удаляю, предупреждение о предупреждении сохраняется ... с уважением,

SabKo

Answer 1

это не пусто на самом деле это терпит неудачу из-за того, что $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')