質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3410閲覧

タブ切り替え時にスクロールしなくても画像遅延読込を利用できるようにしたい

fight

総合スコア11

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/31 06:10

前提・実現したいこと

タブ切り替え時にスクロールしなくても画像遅延スクリプトの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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ファイル名から推測して最新の2.0.0-beta.2ではなく、1.*だとして回答します。

1.9.7のソースを読むと'appear'をトリガーすることで強制的に表示させられるようなので、$(this).addClass('tab_current');後にこれを加えればいいでしょう。

jQuery

1$('img.lazyload:visible').trigger('appear');

投稿2019/01/31 06:52

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fight

2019/01/31 07:33

ありがとうございます! こちらで希望する動きにすることができました!! ご指摘の通り、バージョンは1..9.7です。 本当に助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問