Question

为了改善我网站的页面速度，Pagespeed Insight建议使用延迟图像而不是懒惰的jQuery图像。我根据另一个主题的建议进行了尝试

我使用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模板中的延迟图像代码，所以

现有的Lazy Image脚本：

<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＆amp;＆amp; $ info 1 [0] ==＆＃39; src＆＃39;）{），它会产生错误。< / p>

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作为值（空数组？）。

是否有建议可以帮助我并指出正确的方向？这是实现延迟图像的正确方法吗？

更新：

我在下面应用了新手的提议，这似乎非常符合逻辑，但同样的错误＆＃34;注意：未定义的偏移量：0行在vqmod \ vqcache \ vq2-system_modification_system_library_response.php第115行＆＃34;仍然存在。只有当我从header.tpl中删除第2点的脚本文件时，错误才会消失。

可能是我的延迟图像只会在稍后（太晚）开始加载，并且第4点的代码在请求时无法正确执行？第4点中的代码用于根据google pagespeed的建议为页面上的所有图像提供图像和高度属性？

如何解决？我已经解决了这个问题几天了，所以任何建议都会非常感激。

我必须在此页面上添加其他<img>标记 - 而不是延迟加载 - 但我已逐个删除所有这些标记，无论我删除哪个img标记，通知警告仍然存在...

此致

SabKo

Answer 1

由于$info[1][0]等于"width"因为正则表达式而导致其失败，实际上它并不是空的。因为你首先将width属性放到第一个位置（[0]），所以先按顺序方式扫描，然后先放入第一个位置（'/(width|height|src)=("[^"]*")/i）。请注意，regexp中的条件符合条件。并不重要。在大多数情况下，'/(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']; ?>"/>完全相同的输出。真正重要的是标记中的属性顺序主题字符串中的第一个内容并且通过测试将首先放入< /强>

因此，如果您更改此标记相关代码

if (count($info) == 3 && $info[1][2] == 'src')

然后它会正常工作。如果您不想更改该订单，您还可以编辑{{1}}
等条件

图像延迟脚本而不是惰性图像脚本会导致未定义的偏移量？

1 个答案: