jQuery greyScale不是灰度並顯示錯誤圖像

我正在使用this jQuery greyscale plugin。 Example page，Developer page。jQuery greyScale不是灰度並顯示錯誤圖像

現在，該效果僅適用於Internet Explorer。我在該頁面上有三個圖像。前兩個不是灰度 - 我總能看到它們的顏色（帶/不帶懸停效果）。第三張圖像是灰色的，但是如果我將鼠標懸停在上面，我會看到第二張圖像的灰度圖像。

這是我的實例化灰度功能：

<script type="text/javascript"> 
    jQuery(function() { 
     // fade in the grayscaled images to avoid visual jump 
     jQuery("[class^='wp-image-'], [class*=' wp-image-']").hide().fadeIn(1000); 
    }); 
    // user window.load to ensure images have been loaded 
    jQuery(window).load(function() { 
     jQuery("[class^='wp-image-'], [class*=' wp-image-']").greyScale({ 
      // call the plugin with non-defult fadeTime (default: 400ms) 
      fadeTime: 500, 
      reverse: false 
     }); 
    }); 
</script>

這是第二圖像的螢火蟲輸出：

<div class="gsWrapper" style="position: relative; display: inline-block;"> 
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture2.jpg" title="Picture" class="size-full wp-image-317 alignnone" style="display: inline;"> 
</div>

這是螢火蟲第三圖像的輸出：

<div class="gsWrapper" style="position: relative; display: inline-block;"> 
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture3.jpg" title="Picture 3" class="alignnone size-full wp-image-320" style="display: inline;"> 
    <canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas> 
    <canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas> 
    <canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas> 
</div>

Firebug does not show a 在我看來，這個fe ature工作，但現在看起來像borken。什麼改變了？我怎樣才能找到錯誤？

我試圖加載腳本functions.php與wp_enque_script以避免jQuery衝突。此外，我把我的jQuery代碼放在的header.php以下，並將我的電話從$更改爲jQuery。目前我正在使用jQuery 1.7.2（與1.8.2一起使用，效果相同）。我也嘗試停用所有插件，但效果仍然相同。

現在我將這個頁面保存在Internet Explorer中並在Firefox中打開它。該頁面然後工作。它似乎與渲染有關？

編輯：

所以插件與canvas在FF。每一個形象，應該有一個canvas圖像：（！這裏的最後一個圖像擁有所有帆布領域）

<div class="gsWrapper" style="position: relative; display: inline-block;"> 
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/image4.jpg" title="image4" class="alignnone size-full wp-image-1515" style="display: inline;"> 
    <canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas> 
</div>

在我的情況下，只有最後的圖像具有帆布場。所以代碼被追加到錯誤的元素。該插件具有下列JS代碼：

this.each(function(index) { 
    $(this).wrap('<div class="gsWrapper">'); 
    gsWrapper = $(this).parent(); 
    // ...

所以首先它環繞的一個元素，然後將其再次訪問。或許這個錯誤是與index一起在這些行中？

來源

2012-10-01 testing

似乎我發現了錯誤。該域名有一個臨時URL。現在該網站上線並獲得了一個新的域名。該腳本發出了代理請求，並在這裏以某種方式附加到錯誤的元素。

現在我改變了HTML中的鏈接到新的域，現在它工作正常。儘管如此，代理請求似乎出現故障，應該加以改進：

$.getImageData({ 
    url: $(this).attr('src'), 
    success: $.proxy(function(image) { 
     can = greyScale(image, image.width, image.height); 
     if ($options.reverse) { can.appendTo(gsWrapper).css({"display" : "block", "opacity" : "0"}); } 
     else { can.appendTo(gsWrapper).fadeIn($options.fadeTime); } 
     }, gsWrapper), 
    error: function(xhr, text_status){ 
     // silently fail on error 
    } 
});

來源

2012-10-01 15:25:22 testing

jQuery greyScale不是灰度並顯示錯誤圖像

回答

相關問題