search

dkern / jquery.lazy

A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto.
http://jquery.eisbehr.de/lazy
Other
1.02k stars 237 forks source link

Is it possible to lazy load Google Maps? #221

Closed ZioNN closed 4 years ago

ZioNN commented 4 years ago

I´m trying this all day long! I´m using iframe plug-in like this:

<div class="col-xs-12 col-md-8">
  <iframe data-src="https://www.google.com/maps/d/u/1/embed?mid=1qBlmrpuY46Esp-C88Tfgt45seN9kDE9tgy" width="100%" height="530"></iframe>
</div>

Initiating like this:

$(function() {
  $('.lazy').Lazy();
});

Using this libs

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"></script>

But it doesn´t work. I see this in the code, using inspector. 

<html><head></head><body></body></html>

What am I doing wrong? I appreciate your help!

ZioNN commented 4 years ago

I just figured it out!

In your example there´s no initialization needed so I thought I shouldn´t do it. So I tried now to do this

$(function() {
  $('.lazymap').Lazy();
});

And this

<iframe class="lazymap" data-src="https://www.google.com/maps/d/u/1/embed?mid=1qBlmrpuY46Esp-C88456tgtgb65eN9kDE9687" width="100%" height="530"></iframe>

And it finally worked like a charm!

Thanks for this valuable tool!