更改基於移動設備的圖像源

我正在嘗試更改小屏幕尺寸設備的圖像源。我只想定位小於1024像素寬度的移動設備（不是桌面瀏覽器）。更改基於移動設備的圖像源

我不想使用媒體查詢，因爲如果我在桌面上更改瀏覽器大小，它們將加載圖像的高分辨率和低分辨率版本。我可以單獨定位設備，但它會對我的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"); 
     }); 
    }); 
    } 
});

來源

2014-12-05 curved

不是修改'src'屬性，你可以嘗試動態插入img元素使用'$（）HTML（）'。 – Pawan 2014-12-05 07:00:49

$(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"); 
      }); 
     } 
    }); 
    } 
});

來源

2014-12-05 05:01:37

您的問題（據我所知）是當頁面初始加載，所有的圖像都src="img/galeri/large/..."，和你要有條件地更改是不是src="image/galeri/medium/..."如果適合視口寬度。

不幸的是，只要在dom中加載了img，瀏覽器就會在jQuery運行之前開始加載src文件。

既然你顯然有在後臺的一些控制，重量最輕的（儘管非常哈克）解決方案可能是核彈攻擊網頁上的所有img S上src屬性，與其他一些屬性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); 
    }); 
});

再次，哈克，但它將使你正在尋找一個最小量的異步加載工作的。

來源

2014-12-05 06:39:59

試着做了的窗口大小調整事件處理程序：

<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'; 
    } 
}

來源

2014-12-05 13:57:15 www139

更改基於移動設備的圖像源

回答

相關問題