javascript - 生产中的手机/平板电脑浏览器上出现奇怪的 JS 错误

Question

这个项目有很多我们从以前的开发人员那里继承来的垃圾 JS。

最近我们的图像停止出现在 http://www.thegospelcoalition.org 上在平板电脑和手机上。

如您所见，图像在桌面上效果很好。将其拉到设备上或 Chrome 开发工具模拟器中，您就可以看到问题。

我们的开发工作进展顺利，图像按预期显示。

我们已经清除了 CloudFlare 缓存，但仍然不高兴。

排查问题是有问题的，因为在本地，团队都很好。

有什么指点吗？

Answer 1

在 js/aggregate-ck.js ，你有这个函数来获取 img src 并将其设置为背景图像:

_transferImages = function(selector){
    var $selector=$(selector);
    $selector=$selector.not($_transferredImages);
    $selector.each(function(){
        var $this=$(this),
        $img=$this.children("img"),
        $img1;
        if($img.length){
            $img1=$img.eq(0);
            $this.css({"background-image":"url('"+ $img1.attr("src")+"')"});
            $img1.remove();
        }
    });
    $_transferredImages=$_transferredImages.add($selector);
    return $selector;
};

当我使用桌面用户代理时，它工作正常，因为图像具有 src 属性。不幸的是，对于移动用户代理，这些图像没有 src，而是有 data-cfsrc 属性。

要更正此功能，请替换

$img1.attr("src")

与

($img1.attr("src") || $img1.attr("data-cfsrc"))

一切顺利!