2016-12-31 7 views
0

私のウェブサイトのページスピードを向上させるために、Pagespeed Insightは、レイジーjquaery画像の代わりに遅延画像を使用することを推奨しています。私は小さい1x1ピクセルのGIFを作成イメージ遅延スクリプトの代わりにイメージ遅延スクリプトが定義されていないオフセットを引き起こしますか?

  1. :私は別のトピックからrecommandationsに従って試み

    Reference Topic on stackoverflow

    Iはopencart 2を使用し、私は次のようにコードを変更しようとしましたこれをimage/imgdefer.gifとしてアップロードしました。

  2. すべてのページで使用されている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> 
    
  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> 
に置き換えられました
  1. 上記のポイント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); 
         } 
        } 
    } 
    
  2. 私はいくつかのシミュレーションを行なったし、私は$info[1][0]は時々値(空の配列?)として0を与えるという印象を持っています。

正しい方向に私を助けてくれる助言がありますか?遅延イメージを実装する正しい方法ですか?

UPDATE:持続する「ライン115上vqmod \ vqcache \ VQ2-system_modification_system_library_response.phpで0:オフセット不定お知らせ」 私は非常に論理的に思えたその下に初心者の提案が、同じエラーを適用しました。ポイント2のスクリプトファイルをheader.tplから削除した場合にのみ、エラーはなくなりました。

遅れた画像のみが遅く(遅すぎる)読み込みを開始し、ポイント4のコードが要求された時点で正しく実行できないことがありますか?ポイント4のコードは、Google pagespeedの推奨事項に従って、ページ上のすべての画像の画像属性と高さ属性を提供するために使用されます。

解決方法私はすでにこの問題について数日間頭を壊しているので、どんな提案も非常に感謝しています。

このページには遅延ロードではなく他のタグも追加する必要がありますが、これらのタグを1つずつ削除していますが、どのimgタグを削除しても通知の警告は持続します... よろしく、

SabKo

答えて

0

それは実際にそれが$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']; ?>"/> 

のようなタグに関連するコードを変更するのであれば、それはあなたが順序であなたもif (count($info) == 3 && $info[1][2] == 'src')

のような条件を編集できることを変更したくない細かいI guess.Inケースを働くだろう
関連する問題