Beim Scrollen nachladen

Hallo ich habe auf einer Webseite mehrere iFrames die nebeneinander (per Flex) oder auch untereinander (je nach Bildschirmgröße) angezeigt werden. Wie kann ich erreichen, dass beim Öffnen der Seite nicht alle iFrames geladen werden, sondern erst beim Scrollen nach und nach.

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
  
<style>
*{
  margin:0;
  padding:0;
}
body{
   display:flex;
   flex-direction:column;
   min-height:4500px;
}
nav{
  height:100px;
  width:100%;
  font-size:50px;
  text-align:center;
  border:2px solid black;
}
main{
  font-size:20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  min-height:4500px;
  justify-content: space-around;
}
iframe{
  border:2px solid black;
  width:80%;
  margin:0 auto;
  text-align:center;
  height:500px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX