JavaScript Safari设置数据属性问题

为了处理响应图像，我根据当前窗口宽度使用正确的数据属性显示图像。所以例如如果我的窗口宽度大于我的settings.desktop var值，则当前在data-lrg属性中的任何内容都将显示为图像。JavaScript Safari设置数据属性问题

以下JavaScript代码适用于所有最新版本的浏览器，除了在Safari中无法设置图像的数据属性或如此。

我的JS-fu并不完全符合标准，这意味着我不是100％确定自己在做什么。有人知道任何有关设置数据属性的Safari怪癖吗？

标记：

<img class="data-img" data-xsml="width_460_height_345.jpg" data-sml="width_670_height_503.jpg" data-med="width_437_height_328.jpg" data-lrg="width_288_height_216.jpg" alt="alt tag" src="width_288_height_216.jpg">

我的javascript：

$.fn.dataImg = function(options) { 
    var settings = $.extend({ 
    mobile: 506, 
    tablet: 725, 
    desktop: 945 
}, options); 
var elements = $(this); 

function getSrc(element) { 
    var screen = $(window).width(); 
    if (screen >= settings.desktop) { 
     return element.data('lrg'); 
    } 
    else if (screen < settings.desktop && screen >= settings.tablet) { 
     return element.data('med'); 
    } 
    else if (screen < settings.tablet && screen >= settings.mobile) { 
     return element.data('sml'); 
    } 
    else { 
     return element.data('xsml'); 
    } 
} 
function breakpoints() { 
    elements.each(function() { 
    var e = $(this); 
    var src = getSrc(e); 
    if(src != undefined){ 
     if (e.is('img')) { 
      e.attr('src', src); 
     } else { 
      e.css('background-image', 'url(' + src + ')'); 
     } 
    }   
}); 
}breakpoints(); 

if(settings.resize == true){ 
    $(window).resize(function(){ 
     breakpoints(); 
    }); 
    } 

};

来源

2015-05-26 jimjoebob123

你的意思是Safari for Windows或Mac？ –

对于Windows和Mac，不知道这是好还是不好。在具有完全相同结果的多个系统上进行测试，图像不会按预期调整大小。 – jimjoebob123

你可以在jsfiddle上提供一个测试用例吗？ –

事实证明，这是这是最有可能使用的框架的不正确使用造成了CSS或标记错误。不知何故，Safari处理的事情与其他浏览器不同。我的坏！

来源

2015-05-26 13:59:33 jimjoebob123

JavaScript Safari设置数据属性问题

回答

相关问题