Question

我正在使用this jQuery greyscale plugin。 Example page，Developer page。

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

这就是我实例化greyScale函数的方法：

<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中打开了它。该页面然后工作。它似乎与渲染有关吗？

修改

因此插件适用于FF中的canvas。每张图片都应该有一张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一起出现在这些行中？

Answer 1

似乎我发现了错误。域名有一个临时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
    }
});

jQuery grayScale没有缩放并显示错误的图像

1 个答案: