Lazy Load で特定箇所を除外するには?

7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #26690
      Reira Carreon
      ゲスト

      はじめまして。
      SimplicityのLazy Loadを有効化したいのですが
      自サイトに設置したスライダーの画像が消えてしまうので、このスライダーをLazy Loadから除外しようと思いました。

      以前、運営してたBloggerブログでは、
      Lazy Loadを.imgに適用して、特定のIDやクラスを除外する場合は、

      $("img").not("ID名 or Class名")

      と記述してたのですが、

      Simplicityの場合は、PHPが分からないこともあり
      どこへ書けばいいのか分かりません。(^^;)

      全然急いでませんので、
      お手隙の時にアドバイスをいただければ幸いです。m(_ _)m

    • #26692
      hidekichi
      ゲスト

      Simplicityのlazyloadは http://www.appelsiini.net/projects/lazyload こちらのを利用されているみたいなので、optionその他に関してはすぐには何ともわかりません、が、自分のサイトでちょっと見てみた所lazyloadを有効にした時には、idやclassではなく、data属性でtrueやfalseが入っているようです。

      と言うことは、ターゲットのセレクタが、lazyloadのdata属性でtrueの時はfalseにしたり、あるいはdata属性をとってしまえば効かないのではないのではないかなぁと思ったりします。

      ただそれではスライダーが動作しないかも知れませんので、そんな場合は外部スクリプト(lazyloadのスクリプト)をターゲットのdivに読み込むような設定が必要かも知れません。

      あるいは、Simplicityのlazyloadを使用せず、例えばプラグイン(a3 Lazy Loadなどのon|offできるもの)で対応されるとかはどうでしょうか?

    • #26694
      Reira Carreon
      ゲスト

      hidekichiさん お返事ありがとうございました。

      >>data属性でtrueやfalseが入っているようです。

      functions.phpの
      //画像タグにLazyLoad用の属性などを追加
      ↑この部分ですよね?

      場所は分かってもどう編集したらよいか分からなくて・・(^^;)

      a3 Lazy Loadには確かにclassでoffにできる設定があるのですが、試したところテキストウィジェットから設置したスライダーはoffできましたが、本文内のスライダーには効かなくてa3 Lazy Loadのサポートページにもclassでのoffができない不具合が報告されてるようでした。(T_T)

    • #26705
      hidekichi
      ゲスト

      >functions.phpの
      >//画像タグにLazyLoad用の属性などを追加
      >↑この部分ですよね?

      その部分ですが、正規表現でimgタグを拾っているので除外するclassを設定すれば良いんですけれども、色々面倒なので、「a3 Lazy Load」がダメなら「BJ Lazy Load」とかはどうでしょうか?
      前レスと同様にSimplicityのlazyloadを止めて、プラグインで対処するという形なんですけれども。

      またSimplicityの導入しているlazyloadは、予め何かしらの画像(1x1px)を用意しておいて、スクロールで画面内に画像が到達すると、オリジナルの画像のアドレス(data-original)がsrcに書き換わるような挙動を見せていますので、もしかしたら以下でイケるかも知れません。

      (function($){
        $(function(){
          $("#test img").each(function(){
            var original_url = $(this).attr("data-original");
            $(this).attr("src", original_url);
            $.removeAttr(this, "data-lazy data-original");
          });
        })
      })(jQuery);

      親テーマなり子テーマなりのjavascript.jsに追記します。
      スクリプトの意味合い的には、div (id|class)= testのブロック内にあるimgに対して、まずdata-originalに入っている元々の画像のアドレスを変数に入れておきます。そのimgの置き換わっているsrcの部分を元々の画像アドレスに変更して、data-lazyの部分と、data-originalを取り除きます。

      ここから、スライダーが動作するかどうかはわかりませんが、スライダーを入れる部分を囲むようにしてdiv id=”test(仮)”のようなブロックを入れておき、その中のimgに対してはlazy-loadが使用するであろう属性を書き換え取り除くという感じにしています。

      ちなみに単体の画像では成功しました。→ うちのサイトのテスト投稿の一番下の画像。
      web開発画面で確認していただけたら素のimgタグが書きだされていると思います。

      ※ >とか<とか色々出てるかも知れませんが、これは管理者権限のない人が投稿したスクリプトがコード化されるためです。おそらくその内にわいひらさんが修正してくれるだろうと思います(チラリ

    • #26706
      hidekichi
      ゲスト

      あ、;を忘れてた。まぁ別に問題ないと思いますが、

      …
      $.removeAttr(this, “data-lazy data-original”);
      });
      }); ←ここ
      })(jQuery);

    • #26714
      アバター画像わいひら
      キーマスター

      $(“img”).not(“ID名 or Class名”)

      こういった書き方で、除外できるかは試したことがないのですが、上記のようなコードを書いている場所は、javascript.jsの以下の部分です。

        if (typeof lazyload_config !== 'undefined') {
          jQuery('img').lazyload(lazyload_config);
        }

      オプションを変更するならheader-javascript.phpの以下の部分です。

        if (is_lazy_load_effect_enable()) {
          $lazyload_config['effect'] = 'fadeIn';
        }
    • #26727
      Reira Carreon
      ゲスト

      hidekichi さん ありがとうございました。
      教えて頂いたようにスライダーを
      <div id="youtube-m-slider"></div>で囲み、
      コードを子テンプレのjavascript.jsへ追記したところ上手く行きました♪(^^)/
      本当にありがとうございました。m(_ _)m

      わいひら さん ありがとうございました。
      教えて頂いたjavascript.jsの部分を
      jQuery('img').lazyload(lazyload_config);
      ↓
      jQuery('img').not("#ID名 img").lazyload(lazyload_config);
      もしくは↓
      jQuery("img:not(#ID名 img)").lazyload(lazyload_config);

      どちらの書き方でもスライダー部分は除外できましたが、なぜかスライダー下のサムネイル部分が除外できず、否定疑似クラスを増やす方法で色々試しましたが上手くいきませんでした。

      スライダープラグイン以外でのクラスやIDでの除外には問題ないとは思います。
      一応報告まで。。
      ありがとうございました。m(_ _)m

    • #26743
      アバター画像わいひら
      キーマスター

      詳しい報告ありがとうございます。
      僕も勉強になりました。
      今度何かあった場合は、今後除外方法を利用してみようと思います。

7件の返信スレッドを表示中
  • トピック「Lazy Load で特定箇所を除外するには?」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)