生产中的移动/平板电脑浏览器上出现奇怪的 JS 错误答案

【问题标题】：weird JS error on mobile/tablet browsers in production生产中的移动/平板电脑浏览器上出现奇怪的 JS 错误
【发布时间】：2014-10-03 16:50:13
【问题描述】：

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

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

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

我们在开发中工作正常，图像按预期显示。

我们已经清除了 CloudFlare 缓存，但仍然没有任何乐趣。

解决问题是有问题的，因为在本地，团队很好。

任何指针？

【问题讨论】：

标签： javascript jquery production-environment

【解决方案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"))

你很高兴！

【讨论】：

我可以请你喝啤酒吗？ CloudFlare 数据源:)
哈哈很高兴我能帮上忙。顺便说一句，这是一个很棒的网站！

【解决方案2】：

我能看到的唯一问题是调用了应该以特定屏幕尺寸加载的图像。您可以看到执行比较返回的值显然返回不正确：

background-image: url(http://www.thegospelcoalition.org/undefined);

解决这个问题，你应该会很好。（不尊重其他错误）

【讨论】：