我希望 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"> 👁 <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>
1 回答
慕的地6264312
TA貢獻1817條經驗 獲得超6個贊
不要設置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"> 👁
<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>
- 1 回答
- 0 關注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消