Загружать iframe только при наведении курсора

Question

Эй, я хочу, чтобы iframe загружался только тогда, когда на нем зависает mosue.

Я хочу, чтобы он работал только когда мышь наведена, потому что у меня их много и скорость загрузки сайта очень плохо.

Любые идеи?

Я уже пробовал, если со скрытым 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

Не устанавливайте src фрейма. Установите его только при первом наведении курсора на пользователя.

В следующем фрагменте вы можете видеть, что страница внутри 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>