前提・実現したいこと
タブ切り替え時にスクロールしなくても画像遅延スクリプトのLazyloadを利用できるようにしたい
自サイトでタブ切り替えで表示しているコンテンツがあります。
今回タブで中身で使用している画像にLazyloadを使用して画像読込遅延をおこなう処理を
実装したいと思っています。
タブで隠れているコンテンツ以外の箇所は画像遅延処理は問題ないのですが
タブを切り替えて隠れている部分を開いたときに、画像が読み込まれていません。
ただ少しスクロールしたら読み込まれます。
そもそもこのLazyloadがスクロールしないと画像が読み込まれないというのは
わかっているのですが、タブ切り替えたときにスクロールしなくてもすぐ表示されるようする
したいのです。
そもそも実現可能なのか、もしくはこのLazyを使う以外に方法があればご教示いただきたいです。
該当のソースコード
<head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(function() { $('.tab li').click(function() { var index = $('.tab li').index(this); $('.content li').css('display','none'); $('.content li').eq(index).css('display','block'); $('.tab li').removeClass('tab_current'); $(this).addClass('tab_current') }); }); </script> <script src="jquery.lazyload.js"></script> <script> jQuery(window).on('load', function() { //ページ読込完了後 SetLazyLoad(); }); function SetLazyLoad(target){ if(!target){ jQuery("img.lazyload").lazyload({ effect: 'fadeIn', effectspeed: 1000 }); } else { jQuery(target).lazyload({ effect: 'fadeIn', effectspeed: 1000 }); } } </script> <style> .tab{ list-style:none; } .cf{ overflow : hidden; } .tab1, .tab2, .tab3 { float : left; background : #5f9ea0; padding : 5px 25px; margin-right : 1px; } .tab_current { background : #b0e0e6; } .content { list-style:none; } .content1, .content2, .content3 { display : none; background : #b0e0e6; padding : 20px; width : 500px; } .content_current { display : block; } </style> </head> <body> <ul class="tab cf"> <li class="tab1 tab_current">1つめ</li> <li class="tab2">2つめ</li> <li class="tab3">3つめ</li> </ul> <ul class="content"> <li class="content1 content_current"><img class="lazyload" data-original="aaa.jpg" src="loading.gif"></li> <li class="content2"><img class="lazyload" data-original="bbb.jpg" src="loading.gif"></li> <li class="content3"><img class="lazyload" data-original="ccc.jpg" src="loading.gif"></li> </ul> </body> </html>
試したこと
タブ切り替えボタンをクリックするとLazyが動くという処理をしたらいいのか?
click() を使う?
$( セレクター ).click(function(){ // 実行する処理を記述 });
これ以上は勉強不足で記述方法がわからないでいます・・・
補足情報(FW/ツールのバージョンなど)
Lazyloadはスタンダードな下記です。
https://github.com/tuupola/jquery_lazyload
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/31 07:33