fosc/fosc.space
1
0
Fork 0
Code Issues Releases Activity

Lazyload map

Browse Source
This commit is contained in:
Pablo Moyano 2020-03-14 18:43:29 +01:00
parent 72501a208c
commit 8d9176ccaf
3 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/main.css
View File

@ -513,6 +513,7 @@ nav ul li ul li a {
#map { #map {
height: 300px; height: 300px;
width: 80%; width: 80%;
border: 0;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto margin-right: auto

10
index.html
View File

@ -26,7 +26,6 @@
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src="js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>
</head> </head>
@ -352,7 +351,7 @@
</div> </div>
<div class="map"> <div class="map">
<iframe id="map" frameborder="0" style="border:0" allowfullscreen></iframe> <iframe id="map" class="lazy" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076"" frameborder="0" allowfullscreen></iframe>
</div> </div>
</div> </div>
@ -372,7 +371,12 @@
</div> </div>
</footer> </footer>
<!-- With the DOM ready, swap all icons --> <!-- With the DOM ready, lazyload all pics and swap all icons -->
<script>
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
});
</script>
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script> <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
</body> </body>

10
js/main.js
View File

@ -1,10 +0,0 @@
function loadMap() {
var site = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076";
document.getElementById('map').src = site;
}
document.addEventListener("DOMContentLoaded", function() {
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
});
})