JQuery - отображение изображения с помощью наведения

Question

В настоящее время я работаю с CakePHP и jquery.Я получил массив желаемых результатов.Я должен отобразить этот массив в качестве вывода.Одно из значений массива содержит «идентификатор изображения», который соответствует изображению для значения в массиве.Что мне нужно сделать, так это отобразить эти изображения только тогда, когда я наведу курсор мыши на данные массива.Прямо сейчас все изображения загружаются при загрузке страницы.Это увеличивает время загрузки страницы.При наведении курсора изображение будет вызываться только при наведении курсора мыши, а не при загрузке страницы.

Я новичок в jquery.Я просто хотел знать, как это можно сделать.Если кто-то покажет мне какой-то способ начать, я могу это осуществить.Любая помощь будет оценена.Дайте мне знать, если вам нужна дополнительная информация.

С уважением, BG

Answer 1

Это легко сделать с помощью jquery .hover ().

$(function() {
    $("THE CSS SELECTOR YOU WANT TO HOVER").hover(
    function () {
      $("THE CSS SELECTOR YOU WANT THE IMAGE IN").html('<img src="blabla.jpg" alt="" />');
    })

});

Если вы хотите, чтобы blabla был идентификатором, дайте вашему CSS-селектору, который вы хотите найти, идентификатор и получите этот идентификатор с помощью jquery.

Answer 2

Попробуйте что-то вроде:

HTML:

<div id="showImg">Show Images</div>

Javascript и jQuery:

$('#showImg').mouseover(function(){
    $.post('pathToCakeServerPage', function(data) {
        $('#showImg').append(data);
    });
});

здесь документация для Post - http://api.jquery.com/jQuery.post/ длянаведение мыши - http://api.jquery.com/mouseover/