仅当鼠标悬停时加载 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() {&nbsp; &nbsp; var src = $(this).children(".test").attr('src');&nbsp; &nbsp; if(!src){&nbsp; &nbsp; &nbsp; src = $(this).children(".test").attr('data-src');&nbsp; &nbsp; &nbsp; $(this).children(".test").attr('src', src);&nbsp; &nbsp; }&nbsp; &nbsp; $(this).children(".test").show();}).mouseout(function() {&nbsp; &nbsp; $(this).children(".test").hide();});.text {&nbsp; &nbsp; color: #069;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; text-decoration: none;}.test {&nbsp; &nbsp; //display: none;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; width: 400px;&nbsp; &nbsp; height: 400px;}<span style="font-size:120%;"><b><a class="text"> &#128065;&nbsp;&nbsp;<iframe class="test" data-src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></iframe></a></b></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>