仅当鼠标悬停时加载 iframe

Question

我希望 iframe 仅在鼠标悬停在其上时加载。我只希望它在鼠标悬停时加载，因为我有很多这样的网站，而且网站的加载速度非常糟糕。有任何想法吗？我已经尝试过如果周围有一个隐藏的 div，但我不喜欢这个选项$(".text").mouseover(function() {    $(this).children(".test").show();}).mouseout(function() {    $(this).children(".test").hide();});.text {    color: #069;    cursor: pointer;    text-decoration: none;}.test {    display: none;    position: absolute;    border: 1px solid #000;    width: 400px;    height: 400px;}<span style="font-size:120%;"><b><a class="text"> &#128065;  <iframe class="test" src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></iframe></a></b></span>                        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

不要设置srciframe 的 。仅当用户第一次悬停时设置它。

在下面的代码片段中，您可以看到 iframe 内的页面最初并未加载，直到您将鼠标悬停在眼睛上。

我特意发表了评论display: none;，以便您可以观察到该页面未加载。

$(".text").mouseover(function() {

    var src = $(this).children(".test").attr('src');

    if(!src){

      src = $(this).children(".test").attr('data-src');

      $(this).children(".test").attr('src', src);

    }

    $(this).children(".test").show();

}).mouseout(function() {

    $(this).children(".test").hide();

});

.text {

    color: #069;

    cursor: pointer;

    text-decoration: none;

}

.test {

    //display: none;

    position: absolute;

    border: 1px solid #000;

    width: 400px;

    height: 400px;

}

<span style="font-size:120%;"><b><a class="text"> &#128065;

 

 <iframe class="test" data-src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></iframe>

</a></b></span>

            

            

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>