自清除內部jquery.each）的間隔（

我需要位置/調整圖像的大小與它JavaScript加載之後。爲了保持縱橫比不變，我必須知道圖像的寬度/高度。我可以使用.load事件，但這種觸發太晚，使得重新定位可見。相反，我使用以下技術。自清除內部jquery.each）的間隔（

var interval = setInterval(function(){ 
    if ($('img').height()) { //This means we have got height. 
      //Code that uses $('img').height(). 
      clearInterval(interval); 
    } 
},10);

這可以確保正當我對圖像寬度/高度信息的代碼被執行，它的滿載前。

然而，現在我需要爲一羣圖像（特別是在一個jQuery插件）的做到這一點，這個問題似乎是，第一clearInterval調用清除所有的時間間隔，讓所有，但第一img不變。

我試圖保存在$(this) jQuery的間隔ID對象既作爲一個屬性（$(this).interval = setInterval(...和作爲數據$(this).data("interval", setInterval(...。

我還試圖先保存的ID在變量如上，然後將其分配給$(this).data("interval",interval)剛後

的setInterval調用的右括號。什麼是做讓每一個間隔清除自身，而且只正確的方法是什麼？

我的代碼的完整清單如下

(function($){ 
    $.fn.extend({ 
     centerInParent: function(options) { 
      var defaults = { 
       mode: "fill", //Fill or fit (not implemented) 
       padding: 100 
      } 
      var options = $.extend(defaults, options); 
      return this.each(function() { 
       var o = options; 
       $t = $(this) 
       $p = $t.parent(); 
       var interval = setInterval(function(){ 
        $t.css({position:"absolute", width:"", height:""}) 
        if ($t.height()){ 
         parentRatio = $p.innerWidth()/$p.innerHeight(); 
         thisRatio = $t.innerWidth()/$t.innerHeight(); 
         if (thisRatio > parentRatio) var newWidth = $p.innerWidth() - o.padding; else var newWidth = ($p.innerHeight() - o.padding)*thisRatio; 
         var newHeight = newWidth/thisRatio 
         $t.css({ 
          width: newWidth, 
          height:newHeight, 
          marginTop: ($p.innerHeight() - newHeight)/2, 
          marginLeft: ($p.innerWidth() - newWidth)/2 
         }) 
         clearInterval($t.data("interval")); 
        } 
       }, 10) 
       $t.data("interval",interval) 
      }); 
     } 
    }); 
})(jQuery);

來源

2013-02-13 qwazix

你應該輪詢周圍找出爲什麼'onload'火災太晚了，不會亂。 – Alnitak 2013-02-13 14:29:18

你有沒有考慮隱藏所有的圖像，onload事件調整他們，然後向他們展示，這樣你就不會得到視覺大小調整？ – Archer 2013-02-13 14:31:22

圖像過大（超過1000個像素），這樣的onload正確觸發太晚了（等待，直到圖像滿載），而10-20ms後高度惡有惡報（我想，剛過瀏覽器讀取圖像頭）。隱藏，直到加載也不是一個選項，因爲圖像可能需要一兩秒才能完全加載。最後，我對圖像使用漸進式編碼，以便在所有數據下載之前顯示圖像。 – qwazix 2013-02-13 14:40:01

關閉我的頭頂：

不$t和$p不應該是全局變量？即聲明爲
```
var $t = $(this), 
    $p = t.parent(); 
```
加載圖像，並等待10毫秒來計算它們的大小是在我看來危險的方法：它可以產生不同的結果在不同的瀏覽器

更好預裝圖像和顯示之前計算它們的大小：

var img = new Image(); 
img.src = 'http://your-image-url'; 
$(img).load(function(){ 
    // here, deal with img.width and img.height 
    // and then display 
});

來源

2013-02-13 14:40:19 Nick

我認爲你已經用範圍建議在頭上打了一針。我沒有當場表示，直到你指出了這一點:) – Archer 2013-02-13 14:50:41

我認爲範圍將解決這個問題，是的。我會檢查並接受你的答案，如果這能解決它。預加載不是一個選項，因爲圖像在首次加載頁面時顯示，我希望它們立即顯示調整大小以適應窗口。直到CSS包含普遍支持這個醜陋的黑客仍然是唯一的解決方案。（除非有一些我不知道onsizecalculated事件） – qwazix 2013-02-13 14:55:29

關於危險，我的經驗已經表明，它的工作原理可以接受的跨瀏覽器。由於它是一個間隔而不是超時，它不會等待10ms，而是等待一個非零值產生。一般來說，在Chrome已經準備就緒的情況下，Firefox已經計算出了大小，但這並不是正確的事件。 – qwazix 2013-02-13 15:03:21

自清除內部jquery.each）的間隔（

回答

相關問題