这篇文章仅提供一个思路。随着浏览器版本的更新,该方法有可能会失效。

以谷歌地图的iframe举例。

假设HTML结构是:
<div class="footer-map"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10900.150874750521!2d139.7649905734196!3d35.68600042653089!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0f46a01e55%3A0x3cb9804a03c7234c!2z5rCX6LGh5bqB5pys5bqBIOadseS6rOeuoeWMuuawl-ixoeWPsA!5e0!3m2!1sja!2sjp!4v1523249338622" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe></div>
解决方法:
function embedGoogleMap() {
    if ($(".footer-map").find("iframe").length) {
        var map = $(".footer-map").html();
        $(".footer-map").find("iframe").remove();
        $(window).on("load", function () {
            setTimeout(function () {
                $(".footer-map").html(map);
            }, 500);
        });
    }
}
// 在ready事件中执行函数
$(function () {
embedGoogleMap();
});
原理:

当页面代码加载完毕时,即document ready时,把iframe代码赋给一个变量,保存在内存中,接着将iframe删除,终止iframe的加载。这个过程是很短暂的,几乎察觉不到。
再等页面所有元素加载完毕后,即window load时,再把iframe加回来加载地图。这样就能很好地避免地图无法加载而导致页面渲染遭遇阻塞。

注意:

这个方法容易忽略的问题是,HTML中的class名一定要跟函数里的jQ对象名(class名)一致。否则,jQ代码无法锁定iframe。使用时请严谨。