仅在鼠标悬停时加载iframe

Posted 2023-02-19

嘿，我希望仅当mosue悬停在其上时才加载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>

答案

不设置if​​rame的src。仅在用户第一次悬停时设置它。

在下面的代码段中，您可以看到iframe内部的页面最初没有被加载，直到您将鼠标悬停在眼睛上方。

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

$(".text").mouseover(function() 
    var src = $(this).children(".test").attr('src');
    if(!src)
      $(this).children(".test").attr('src', 'https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
    
    $(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"></iframe>
</a></b></span>
            
            
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

以上是关于仅在鼠标悬停时加载iframe的主要内容，如果未能解决你的问题，请参考以下文章

如何仅在鼠标悬停时在树节点的右端显示一个小图标

FontAwesome Icons仅在鼠标悬停时旋转？

IFRAME：在 IE 和 Edge 中的悬停无法按预期工作

在上悬停时加载图片

将鼠标悬停在 X 上时，如何仅在单个列表中显示 X？

检查仅在鼠标悬停/输入其他元素时出现的元素