问题
I have two different sized images, one if for screens smaller than 759px, the other is for screens larger than 759px.
I have managed to get the source of the images to change when the document loads depending on the window width. But I really would like to be able to do this when the browser is resized as well but for the life of me I can't get it to do that, it only seems to work when the page is initially loaded.
This is my code:
$(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();
});
});
回答1:
First try this...
change your follwoing line of code
$(window).bind("resize", function(){//Adjusts image when browser resized
imageresize();
});
to
// Bind event listener
$(window).resize(imageresize);
and put alert inside imageresize to see if it works or not...
In case above do not work out...I believe there is one problem probably..
in your code you have
$(document).ready(function() {
$(window).bind("resize", function(){//Adjusts image when browser resized
imageresize();
});
}
So the function for reside inside jquery which may not work well. On top of that try using simple javascript; i had similar problem and solved using plain javascript and jquery did not work in some browsers.
Sound strange enough to stop you try at it but would work...
回答2:
Try to use css3 media queries instead of doing it in jQuery or javascript.
http://css-tricks.com/media-queries-sass-3-2-and-codekit/
Consider using "img-src" class on a . Whenever the screen is resized b/w 600px to 900px; x2.jpg will be loaded. By default x1.jpg will be used.
Ex:
.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");
}
}
回答3:
It's not jQuery but you can simple use document.getElementById("myId").src="another.jpg";
to define the new src of the img with id "myId".
回答4:
Your code works fine, as I can see, but I prefer to use setTimeout
, some times page could slow down without resize pause.
$(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);
});
});
Example: jsfiddle.net/SAbsG/
来源:https://stackoverflow.com/questions/12471882/using-jquery-to-change-image-src-when-browser-is-resized