Question

我正在尝试更改屏幕尺寸较小的设备的图像来源。我想仅定位小于1024px宽度的移动设备（不是桌面浏览器）。

我不想使用媒体查询，因为如果我在桌面上更改浏览器大小，他们将加载图像的高分辨率版本和低分辨率版本。我可以单独定位设备，但是我的css文件会非常混乱。

是否只为移动设备加载较小的图片？（特别是小于平板电脑）。另外，对于userAgent，它很难定位像Android平板电脑和Android智能手机这样的设备。

我正在使用此代码，但在刷新页面后也会导致重复文件加载。

$(function() {
  if($(window).width() <= 1024) {
    $(".slides-container li img").each(function() {
      $('.slides-container li img').attr('src',function(i,e){
        return e.replace("img/galeri/large","img/galeri/medium");
      });
    });
   }
});

Answer 1

尝试为窗口调整大小做一个事件处理程序：

<body onload="window.addEventListener('resize', setPanels); setPanels();">

function setPanels()
{
  var windowWidth = window.innerWidth;
  if(windowWidth < 500)
  {
    document.getElementById('your image').src = 'new image source';
  }
  else
  {
    document.getElementById('your image').src = 'new image source desktop';
  }
}

Answer 2

$(function() {
  if($(window).width() <= 1024) {
    $(".slides-container li img").each(function() {
      if($(this).attr('src').indexOf("large") > -1){
          $(this).attr('src',function(i,e){
               return e.replace("img/galeri/large","img/galeri/medium");
          });
      }
    });
   }
});

Answer 3

您的问题（据我所知）是，当页面最初加载时，所有图片都有src="img/galeri/large/..."，并且您尝试有条件地将其更改为src="image/galeri/medium/..."（如果适用）对于视口的宽度。

不幸的是，只要在dom中加载img，浏览器就会开始加载src文件，所有这些都在你的jQuery运行之前。

鉴于您显然对后端有一些控制权，最轻的权重（虽然相当苛刻）解决方案可能是在页面上的所有src上核对img属性，替换为其他一些属性isrc包含资产名称（img/galeri/large或img/galeri/medium后面的位），然后在页面加载时逐步浏览图像标记

$(function() {
    var assetLoc = "img/galeri/large";
    if($(window).width() <= 1024) {
        assetLoc = "img/galeri/medium";
    }

    $(".slides-container li img").each(function() {
        var assetSrc = assetLoc + $(this).attr('isrc');
        $(this).attr('src', assetSrc);
    });
});

再次，hacky，但它将允许您以最少的工作量寻找异步加载。

基于移动设备更改图像源

3 个答案: