【JavaScript】非表示のブロックは読み込まず，表示された時に初めて読み込む方法

初期状態（最初Webページに訪問した時）に，一つのDIV要素を表示しておき，
他のDIV要素は非表示にしておきます．

この時，非表示のDIV要素の中には動画などの読み込みに時間のかかるものがあるとします．

非表示のDIVも，ページにアクセスした時にブラウザは読み込んでしまうと思うのですが，
このように動画などがあった時には読み込むコストが掛かってしまいます．

こういった，
非表示の時には要素の中身のコンテンツを読み込まず，
表示されて初めて読み込むといったことは可能なのでしょうか？
（lazyLoadとは少し違う気がします）

可能であればそのプラグイン，又は書き方を教えていただきたいと思います．
皆様の知恵をお貸しください．
よろしくお願いいたします．

行動規範の内容に同意します

回答1件

JavaScript
1
2<script>
3$(function() {
4    // ページロード完了時にここが初めて動作する。
5    $.ajax({
6       url : "http://MyDomain/view1",
7       success: function(data) {
8             // 受信したデータを HTML として書き込む。
9             $("#target").html(data);
10             // 非表示だった div を見える化する
11             $("#target").show();
12             // くるくるアイコンを非表示にする
13             $(".loading-image").hide();
14       }
15});
16</script>
17
18<body>
19<div class="loading-image">
20    <img src="loading-icon.png" />Loding to...
21</div>
22<div id="target" style="display: none;"></div>
23</body>