Firefox對Safari和Chrome使用不同的jQuery變量值

我正在使用一個美妙的插件computedstyle.js來獲取計算出的對象風格。它允許我操縱通常無法做到的事情的CSS，比如構造圖像。Firefox對Safari和Chrome使用不同的jQuery變量值

我可以拍攝鏈接中找到的圖像源，並更改外殼div和圖像本身的大小。通常你只能知道圖像的大小。

我構造圖像
我尺寸的圖像
我然後尺寸圍繞它的IFRAME，基於改變圖像的大小。

這適用於Chrome和Safari，但當然不是Firefox，在我看來它正在迅速成爲新的Internet Explorer。

這個問題，有沒有一種方法可以讓Firefox等待注意到這個改變，然後再調整iframe的大小？

若要在Chrome和Safari中正常使用，請轉至http://syndex.me。並不正確，Firefox。

不是必須的問題，但如果你想知道我在做什麼，我將刪除Tumblrs Photoset Post的默認庫預覽，並用單個圖像替換它。

if($(this).find('.html_photoset').length){ 
    $(".html_photoset").find("iframe").load(function(){ 
     var myFrame=$(this);       
     $(this).contents().find('.photoset_row:not(:first-child)').each(function(){ 
      $(this).remove(); 
     }) 
    var psPre = $(this).contents().find('.photoset_row').find('a').attr("href"); 
    $(this).contents().find('.photoset_row').children(':not(:first-child)').remove(); 
     $(this).contents().find('.photoset_row').children(':first-child').children().remove(); 
     $(this).contents().find('.photoset_row').find('a').append("<img src='"+psPre+"'alt='Cover Page' />"); 
     $(this).contents().find('img').load(function(){ 
      var myCSS = $(this).getCSS(); //this is the plugin function 
      var myY = myCSS.height.slice(0, - 2); 
      var myX = myCSS.width.slice(0, - 2); 
      $(this).closest(".photoset_row").css({height: myY}); 
      $(this).closest(".photoset_row").css({width: myX}); 
      $(this).css({maxHeight: (heightRef-0)}); 
      $(this).css({maxWidth: "auto"}); 
        //after I've made the fixes to the image, I redo it for the iframe: 
      var myCSS2 = $(this).getCSS(); 
      var myY2 = myCSS2.height.slice(0, - 2); 
      var myX2 = myCSS2.width.slice(0, - 2); 
      myFrame.height(myY2); 
      myFrame.width(myX2); 
      console.log(myY2); 
     })      
}) 
}

來源

2011-11-10 RGBK

如果你變得「習慣」Chrome和Safari，我會說你變得易於Webkit。 Firefox不是Webkit瀏覽器。擴大你的視野。 '：）' –

夠公平的，但這不是一個webkit插件，它是jQuery。其實我相信moz甚至有一些其他瀏覽器沒有的內部計算風格的操縱器，所以我不得不去插件路線。 – RGBK

當涉及到jQuery時，我不知道「webkit plugin」是什麼意思。瀏覽器支持特定的功能，或者它不支持*和*該功能由代碼/標記支持，試圖操縱它。 –

此警告的jQuery docs page有趣的是：

與圖像

的常見挑戰開發者嘗試使用.load解決（）快捷使用時加載事件的注意事項當圖像（或圖像集合）已完全加載時執行功能。有幾個已知的注意事項這應該注意。它們是：

這並不一致，也不可靠地工作，跨瀏覽器的

它不正確的WebKit如果圖像的src設置爲相同的SRC，因爲它沒有前

火正確地泡了DOM樹

可以停止火已經生活在瀏覽器的緩存

所以，試圖緩解這些圖片，我會建議嘗試ŧ Ô追加一個隨機查詢字符串到圖像HREF以避免它被緩存，並避免在src被設置爲與之前相同的端部等

即psPre線改變爲：

var psPre = $(this).contents().find('.photoset_row').find('a').attr("href") + '?' + (Math.random() * 1000000);

來源

2011-11-10 02:59:49 GregL

有趣的是，真的會停止圖像的緩存嗎？如果是這樣，這是一個很好的小竅門。它雖然不能解決問題，但知道的很好。我認爲我的問題是，我在同一個函數中聲明瞭一個具有非常新數據的變量，這些數據是在它之前的行中創建的。我控制檯記錄了第二個變量的值，基本上它仍然可以看到前面三行的值，所以我很確定我在找什麼是某種延遲函數或比較工具來查看第一個值，如果值確實改變。一旦確認，它就是這樣。 – RGBK

是的，如果URL不同（即使它只是查詢字符串，並且該查詢字符串甚至不被頁面使用），瀏覽器會認爲它是一個新的前所未見的資源並下載它，繞過緩存。 – GregL

此外，作爲一般提示，在使用jQuery時儘可能在變量中嘗試緩存。任何時候您重複選擇器或功能鏈，將其緩存在一個變量中，然後使用該變量。這隻能運行一次代碼。例如在您的代碼中，$（this）.contents（）'，'$（this）.contents（）。find（'。photoset_row'）'甚至$（this）'都可以緩存在變量中第一次使用。這會加快腳本的速度。 – GregL

Firefox對Safari和Chrome使用不同的jQuery變量值

回答

相關問題