新規タグ追加の関連商品画像のlazyload

フォーラム その他 新規タグ追加の関連商品画像のlazyload

  • このトピックには5件の返信、2人の参加者があり、最後にmaiにより3ヶ月、 4週前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #93445
    mai
    参加者

    宜しくお願いいたします。
    関連商品画像をこれまではfunctions.phpにて下記の様に表示していました。

    add_filter('usces_filter_assistance_item_list', 'my_format_assistance_item_list',10,2);
    function my_format_assistance_item_list($list, $post) {
    	$width= 150; $height=150;
    	$queried_object= get_queried_object();
        $str = '<li>';
        $str .= '<a href="'. get_permalink() . '" rel="bookmark">';
        $str .= usces_the_itemImage(0, $width, $height, $post, 'return'); //商品画像のHTML
        $str .=以下 略

    今回contens内の画像はwidthとheightを指定することで
    imgタグ内に
    data-src=”画像url” class=” lazyload”が
    自動的に追加されるようになり後読みされています。

    そこでimgタグ内にdata-src=”画像url” class=” lazyload”を追加すれば
    後読みがされるのかと思い追加してみました。
    上記の商品画像のHTML部分を下記の様に変更しました。

    $image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),'medium'); 
    $str .= '<img width="'.$width.'" height="'. $height.'" />';

    ソースコードは変更しましたが、google speed testでは後読みの認識はされていません。
    何か基本的な所が理解できていないためだと思っています。
    アドバイスお願いいたします。

    現在の環境は下記の通りです。
    WordPress のバージョン:5.7
    Welcart のバージョン: 2.2.1
    Welcart専用の拡張プラグイン:
    ご利用のテーマ:voll(子テーマ)
    サーバー:(会社名、サービス名)xserver
    SSLの利用:(独自 常時SSL)

    • このトピックはmaiが4ヶ月前に変更しました。
    • このトピックはmaiが4ヶ月前に変更しました。
    • このトピックは4ヶ月前にyasumaxが編集しました。理由: HTMLタグをエスケイプ処理
    #93449
    mai
    参加者

    loading=”lazy”をimgタグ内に組み込むと遅延読み込み?

    #93458
    sagawa
    キーマスター

    こんにちは。

    今回contens内の画像はwidthとheightを指定することで
    imgタグ内に
    data-src=”画像url” class=” lazyload”が
    自動的に追加されるようになり後読みされています。

    固定ページなどの contens 内の画像に widthとheightを指定しても、自動的にdata-src が埋め込みされたり、クラスが付与されたりはしないとかと思いますが、なにか Lazy load のプラグインなどを導入されているのでしょうか?

    #93465
    mai
    参加者

    sagawa 様

    何時もお世話になっています。
    ご指摘の通りです。
    以前幾つかのLazy Loadのプラグインを試しに入れていました。
    その後、wordpress内の画像あるいはwidthとheightを指定した
    画像は遅延読み込みを自動でするとの説明をどこかで読み
    そのようにしていました。
    そのためLazy Loadに関するプラグインは
    削除あるいは無効化したつもりでいました。
    先ほど確認するとLazy Loaderが有効化されていました。

    合わせてプラグインを使わずにできる方法がございましたら
    御教示頂ければ幸甚です。

    #93474
    sagawa
    キーマスター

    mai様

    loading=”lazy”をimgタグ内に組み込むと遅延読み込み?
    プラグインを使わずにできる方法がございましたら御教示頂ければ幸甚です。

    WordPress 5.5 で WordPress の標準機能としてネイティブ Lazy-load が実装されております。loading="lazy"をimgタグ内に埋め込む事で、loading属性に対応しているブラウザ側で遅延ロードをサポートすることになります。

    #93481
    mai
    参加者

    sagawa 様

    いつも有り難うございます。

    ネイティブ Lazy-load の件有り難うございます。
    当初の問題が解決いたしました。
    ただ、Lazy Loaderをいきなり外すこともできません。
    かなりの数の画像がwidth heightの指定ができていない状態です。

    今後も宜しくお願いいたします。
    有り難うございました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。