jquery - 使用懸停顯示圖像

我目前正在使用CakePHP和jquery。我已經得到了一系列期望的結果。我必須將該數組顯示爲輸出。其中一個數組值包含一個「圖像ID」，它對應於陣列中值的圖像。我必須做的是僅當我將鼠標懸停在數組的數據上時才顯示這些圖像。現在所有的圖像都在頁面加載時加載。這增加了頁面的加載時間。通過懸停方式，只有在鼠標懸停時纔會調用圖像，而不是在頁面加載時調用圖像。jquery - 使用懸停顯示圖像

我是jquery的新手。我只是想知道它是如何做到的。如果有人向我展示了一些啓動方式，我可以將其解決。任何幫助，將不勝感激。如果您需要更多信息，請與我們聯繫。

問候， BG

來源

2011-12-07 BasicGem

添加一個懸停到頁面不會減少加載時間獲得該ID。當您將鼠標懸停在頁面上時，您需要使用AJAX調用服務器。 –

你在說什麼是惰性加載......有很多插件可以用來加載圖像 - 但主要是當頁面滾動時 - 你可以調整它們來使用懸停技術 – ManseUK

試着這麼做：

HTML：

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

的Javascript和jQuery：

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

這裏後的文檔 - http://api.jquery.com/jQuery.post/ 的鼠標懸停 - http://api.jquery.com/mouseover/

來源

2011-12-07 12:14:50

它可以很容易地使用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="" />'); 
    }) 

});

如果你想布拉布拉是一個ID，給你的CSS選擇要HOVER ID和使用jquery

來源

2011-12-07 12:15:14

jquery - 使用懸停顯示圖像

回答

相關問題