0

我正在使用这个 jQuery 灰度插件。示例页面，开发者页面。

现在该效果仅适用于 Internet Explorer。我在那个页面上有三张图片。前两个不是灰度的——我可以看到它们总是有颜色的（有/没有悬停效果）。第三张图像是灰度的，但是如果我将鼠标悬停在它上面，我会看到第二张图像的灰度图像。

这就是我实例化 grayScale 函数的方式：

<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>

这是 Firebug 中第二张图片的输出：

<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>

这是 Firebug 中第三个图像的输出：

<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 没有显示我认为这个功能有效，但现在看起来很糟糕。发生了什么变化？如何定位错误？

我试图加载脚本functions.php以wp_enque_script避免 jQuery 冲突。此外，我将我的 jQuery 代码放在下面wp_head()，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？

4

1 回答 1

0

似乎我发现了错误。该域有一个临时 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-01T15:25:22.740 回答