my_lazy_lode loading=”lazy”が効かないからさ

<div class="ggmap2 my_lazy_lode ">
<iframe loading="lazy" src="https://www.google.com/maps/d/embed?mid=1u1_RQyQSZ0TKAJhA_6oCqqUjPHQm3TSx&ehbc=2E312F" width="640" height="480" ></iframe>
    </div><!-- /.ggmap -->

.my_lazy_lode{display: none;
 &.on{display: block;}
 }

display: noneしたコンテンツ内のgooglemapはロード時に読み込まれないので、ページ表示速度が上がる

フッターにこれも追加

//なんでも使えるように　.my_lazy_lode が画面に入ったら onがつく  .my_lazy_lode.on
$('.my_lazy_lode').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
       
     // スマートフォン向けの記述
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        if (scroll > elemPos - windowHeight - 500){
     $(this).addClass('on');
    }
       
    // タブレット向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        
        if (scroll > elemPos - windowHeight - 500){
     $(this).addClass('on');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight - 500){
     $(this).addClass('on');
    }
}


   } );

//