Question

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

以下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();
     });
    }

 };

Answer 1

原来这是一个CSS或标记错误，最有可能是由于使用的框架使用不当造成的。不知何故，Safari处理的事情与其他浏览器不同。我的坏！

设置数据属性

1 个答案: