jquery - 使用悬停显示图像答案

【问题标题】：jquery - display image using hoverjquery - 使用悬停显示图像
【发布时间】：2011-12-07 11:59:47
【问题描述】：

我目前正在使用 CakePHP 和 jquery。我得到了一系列想要的结果。我必须将该数组显示为输出。数组值之一包含一个“图像 ID”，它对应于数组中值的图像。我要做的是仅当我将鼠标悬停在数组数据上时才显示这些图像。现在所有的图像都是在页面加载时加载的。这增加了页面的加载时间。使用悬停方法，仅在鼠标悬停时才调用图像，而不是在页面加载时调用。

我是 jquery 的新手。我只是想知道如何做到这一点。如果有人告诉我一些开始的方法，我可以完成。任何帮助，将不胜感激。如果您需要更多信息，请与我们联系。

问候，背景

【问题讨论】：

向页面添加悬停不会减少加载时间。当您将鼠标悬停在页面中的某些内容上时，您需要对服务器使用 AJAX 调用。
你在说的是延迟加载......有很多 jQuery 插件可以加载图像 - 但主要是在页面滚动时 - 你可以调整它们以使用悬停技术

标签： jquery cakephp hover jquery-hover

【解决方案1】：

尝试类似：

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/

【讨论】：

【解决方案2】：

使用 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 成为一个 ID，给你的 CSS 选择器你想悬停一个 id 并使用 jquery 获取那个 id

【讨论】：