有什麼方法可以加速jquery/javascript中的img交換？

我有一個稍微模糊的問題。我在我的代碼中有以下內容：http://jsfiddle.net/PMnmw/2/有什麼方法可以加速jquery/javascript中的img交換？

在jsfiddle示例中，它運行平穩。圖像快速交換，沒有任何麻煩。當它在我的代碼庫中時，確實存在一定的滯後。

我想弄清楚爲什麼這種滯後正在發生。 jquery的結構與上面完全一樣。即在$（document）.ready（...）函數內部，我檢查用戶是否點擊了img（基於類名），然後執行與jsfiddle中相同的代碼。

我在我的智慧結束試圖找出在這裏做什麼......很明顯，我沒有做權利交換，或者我在做這件事情時非常沉重。在此之前，我的一位同事正在使用AJAX進行交換，但這似乎更加沉重（完整的請求獲取其他圖標......）。

2012-03-10 Ringo Blancke

你可以試試'$（兒童[0]）。ATTR（「SRC」，「http://i.imgur.com/c0fuZ.png」）'，而不是隱藏和顯示，只改變圖像源。不知道這是否有助於我們，這對我來說都是順利的。 – Kedor 2012-03-10 18:09:51

在jsfiddle示例代碼中，DOM非常小，而parent（）。children（）調用開銷將很小。如果沒有看到我認爲更復雜的代碼需要更長時間。你可以做一個基於ID或數據ID而不是父母/孩子的隱藏/表演對嗎？ – tawman 2012-03-10 18:09:57

嗯，我想說這是一個預加載的問題，但你已經做到了。您可以使用Firebug或其他開發人員工具來跟蹤JavaScript，以查看您的環境中實際執行的操作。 – 2012-03-10 18:12:23

不可見的圖像在瀏覽器顯示前通常不會被加載。如果看起來有問題，請先下載像RIOT或pngCrush這樣的圖像優化程序來優化圖像。如果只有兩個箭頭，你應該考慮將它們加入一個CSS精靈。

你可以儘量不用jQuery做所有事情，但它不應該真的有太大的區別。

像這樣的事情，也許，在JS加載的隱藏圖像和一些中橫過jQuery的外完成（但可能不是問題，雖然代碼似乎過長的一個簡單的圖像交換）：

$(document).ready(function() { 
    var img=new Image(); 
     img.src='http://i.imgur.com/ZFSRC.png'; //hidden image url 

    $(".wrapper").click(function(e) { 
     if(e.target.className=='toggle_img') { 
      $('.toggle_img').toggle(); 
      if (e.target.parentNode.childNodes[1].style.display=='none') { 
       console.log("hello"); 
      } else { 
       console.log("goodbye"); 
      } 
     } 
    });  
});

FIDDLE

來源

2012-03-10 18:53:42 adeneo

CSS sprite會減少加載時間嗎？我只是檢查了鉻 - 只是有img標籤確保圖像預加載。即使顯示設置爲無，圖像仍然會下載到我的機器上。 – 2012-03-10 21:17:28

是的，它會！在一個圖像中同時存在兩個箭頭將確保它們都被加載，只是改變背景位置將比改變圖像源或更改元素更快。另外，它只需要一個服務器下載而不是兩個，所以它將加速幾乎所有方面的加載，這對於一個精靈來說是一個完美的例子。 – adeneo 2012-03-11 02:45:52

我已經修改了你的提琴：http://jsfiddle.net/PMnmw/12/

事情我已經優化：

創建兩個img1和img2一個變量，這樣你就不必導航DOM參考這兩個圖像，從而提高性能。
將點擊處理程序應用於圖像本身，因此您不必搜索包裝的子項。
基本思想是儘可能減少jquery選擇的數量。

讓我知道這是否有助於加快速度。

$(document).ready(function() { 
    var img1 = $('#img1'); 
    var img2 = $('#img2'); 

    $(".toggle_img").click(function(e) { 
     var target = $(e.target); 
     if(target.is(img1)){ 
      img1.hide(); 
      img2.show(); 
     } 
     else if (target.is(img2)) { 
      img2.hide(); 
      img1.show(); 
     } 
    }); 
});

來源

2012-03-10 18:41:48 t0nyh0

有什麼方法可以加速jquery/javascript中的img交換？

回答

相關問題