Using jQuery to change image src when browser is resized

*爱你&永不变心* 提交于 2019-12-19 09:11:03

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!