Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › Lazy Load で特定箇所を除外するには?
-
投稿者投稿
-
-
2015年5月15日 8:16 PM #26690
Reira Carreon
ゲストはじめまして。
SimplicityのLazy Loadを有効化したいのですが
自サイトに設置したスライダーの画像が消えてしまうので、このスライダーをLazy Loadから除外しようと思いました。以前、運営してたBloggerブログでは、
Lazy Loadを.imgに適用して、特定のIDやクラスを除外する場合は、$("img").not("ID名 or Class名")と記述してたのですが、
Simplicityの場合は、PHPが分からないこともあり
どこへ書けばいいのか分かりません。(^^;)全然急いでませんので、
お手隙の時にアドバイスをいただければ幸いです。m(_ _)m -
2015年5月15日 10:15 PM #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できるもの)で対応されるとかはどうでしょうか?
-
2015年5月15日 11:54 PM #26694
Reira Carreon
ゲストhidekichiさん お返事ありがとうございました。
>>data属性でtrueやfalseが入っているようです。
functions.phpの
//画像タグにLazyLoad用の属性などを追加
↑この部分ですよね?場所は分かってもどう編集したらよいか分からなくて・・(^^;)
a3 Lazy Loadには確かにclassでoffにできる設定があるのですが、試したところテキストウィジェットから設置したスライダーはoffできましたが、本文内のスライダーには効かなくてa3 Lazy Loadのサポートページにもclassでのoffができない不具合が報告されてるようでした。(T_T)
-
2015年5月16日 11:44 AM #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タグが書きだされていると思います。※ >とか<とか色々出てるかも知れませんが、これは管理者権限のない人が投稿したスクリプトがコード化されるためです。おそらくその内にわいひらさんが修正してくれるだろうと思います(チラリ
-
2015年5月16日 12:00 PM #26706
hidekichi
ゲストあ、;を忘れてた。まぁ別に問題ないと思いますが、
…
$.removeAttr(this, “data-lazy data-original”);
});
}); ←ここ
})(jQuery); -
2015年5月16日 3:56 PM #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'; } -
2015年5月17日 1:13 AM #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 -
2015年5月17日 7:41 PM #26743
わいひらキーマスター詳しい報告ありがとうございます。
僕も勉強になりました。
今度何かあった場合は、今後除外方法を利用してみようと思います。
-
-
投稿者投稿
- トピック「Lazy Load で特定箇所を除外するには?」には新しい返信をつけることはできません。