當瀏覽器調整大小時使用jQuery更改圖像src

我有兩個不同大小的圖像，一個用於小於759px的屏幕，另一個用於大於759px的屏幕。當瀏覽器調整大小時使用jQuery更改圖像src

我設法根據窗口寬度加載文檔時更改圖像的來源。但我真的希望能夠在瀏覽器調整大小的時候做到這一點，但對於我來說，我無法做到這一點，它似乎只在頁面初始加載時才起作用。

這是我的代碼：

$(document).ready(function() { 
    function imageresize() { 
     var contentwidth = $(window).width(); 
     if ((contentwidth) < '700'){ 
      $('.fluidimage').each(function(){ 
       var thisImg = $(this); 
       var newSrc = thisImg.attr('src').replace('x2', 'x1'); 
       thisImg.attr('src', newSrc); 
      }); 
     } else { 
      $('.fluidimage').each(function(){ 
       var thisImg = $(this); 
       var newSrc = thisImg.attr('src').replace('x1', 'x2'); 
       thisImg.attr('src', newSrc); 
      }); 
     } 
    } 

    imageresize();//Triggers when document first loads 

    $(window).bind("resize", function(){//Adjusts image when browser resized 
     imageresize(); 
    }); 
});

來源

2012-09-18 Daimz

嘗試更新的答案.. –

我試過這個[jsFiddle]（http://jsfiddle.net/GqQsr/1/），它在更改大小時更改了圖像的src。 _我想念什麼？_你的問題到底是什麼？ –

我測試過//綁定事件監聽器 $（window）.resize（imageresize）;在jsFiddle和它的預期效果... –

先試試這個...

改變你的代碼follwoing行

$(window).bind("resize", function(){//Adjusts image when browser resized 
     imageresize(); 
    });

到

// Bind event listener 
    $(window).resize(imageresize);

，並把警報裏面imageresize看看我牛逼的作品或不...

在上述情況下，不工作了......我相信有可能是一個問題..

在你的代碼

你有

$(document).ready(function() { 

$(window).bind("resize", function(){//Adjusts image when browser resized 
     imageresize(); 
    }); 
}

所以功能駐留在jquery裏面，可能無法正常工作。最重要的是嘗試使用簡單的JavaScript;我有類似的問題，並解決了使用普通的JavaScript和jQuery在某些瀏覽器中不起作用。

聲音自嘆不如阻止你嘗試它，但會工作......

來源

2012-09-18 07:11:40

嘗試使用CSS3媒體查詢，而不是在jQuery的或JavaScript這樣做的。

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

考慮使用一個「IMG-SRC」級。每當屏幕調整大小時，黑白600px至900px; x2.jpg將被加載。默認情況下會使用x1.jpg。

例：

.img-src { 
    background-image: url("http://imageurlhere.com/x1.jpg"); 
} 


@media (min-device-width:600px) and (max-width:900px) { 
    .img-src { 
     background-image: url("http://imageurlhere.com/x2.jpg"); 
    } 
}

來源

2012-09-18 07:18:41 Suriya

雖然CSS3確實非常方便這個東西;爲了瀏覽器的兼容性（例如不支持CCSS3的瀏覽器），我建議在jQuery中使用它。 –

另外，OP可能希望圖像是一個真實的img標籤，而不是背景圖像。 – Simon

@Simon，基本概念是根據窗口大小翻轉圖像。我給出的是這種情況下使用媒體查詢的例子。我只是顯示了路線圖，而不是確切的答案。 – Suriya

你的代碼工作正常，我所看到的，但我更喜歡使用setTimeout，有時頁面可以減緩不調整大小停頓。

$(document).ready(function() { 
    var resizeTimer, 
     $window = $(window); 

    function imageresize() 
    { 
     if ($window.width() < 700) 
     { 
      $('.fluidimage').text('< 700'); 
     } 
     else 
     { 
      $('.fluidimage').text('>= 700'); 
     } 
    } 
    imageresize();//Triggers when document first loads 

    $window.resize(function() { 
     clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(imageresize, 100); 
    }); 
});

例子：jsfiddle.net/SAbsG/

來源

2012-09-18 07:33:19 webdeveloper

這真的很好謝謝！ – Daimz

這不是jQuery的，但你可以簡單的使用document.getElementById("myId").src="another.jpg";定義ID爲「身份識別碼」的IMG的新SRC。

來源

2014-01-29 03:50:01

當瀏覽器調整大小時使用jQuery更改圖像src

回答

相關問題