Question

我有一些外部内容，我通过我的Wordpress网站上的iframe显示。内容非常繁重（5mb +），我的网站需要花费太多时间来加载。我可以保留占位符图像，当用户点击占位符时，只会加载iframe吗？

我尝试了BJ Lazy Load插件，但是在用户滚动时触发了iframe，我希望用户点击。

Answer 1

这很快又脏。我假设您使用基于浮动的布局，而不是Flexbox。

<styles>
    #your-iframe {
        display: block;
        margin-bottom: 30px;
        width: 100%;
        height: 400px;
    }

    #iframe-wrapper {
        position: relative;
    }

    #iframe-placeholder {
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    #iframe-placeholder img {
        width: 100%;
    }
</styles>

<div id="iframe-wrapper">
  <div id="iframe-placeholder">
    <img src="https://cdn.pixabay.com/photo/2018/03/10/15/13/water-3214232_640.jpg" alt="">
  </div>
  <iframe id="your-iframe" src=""></iframe>
</div>

<script>
    var yourIframe = document.getElementById('your-iframe');
    var iframeLoader = document.getElementById('iframe-placeholder');
    var iframeSrc = 'https://autotrader.com'

    iframeLoader.addEventListener('click', function() {
        yourIframe.src = iframeSrc;
        this.parentNode.removeChild(this);
    }, false);
</script>

JSFiddle

Wordpress：仅加载iframe

1 个答案: