Question

我正在尝试创建一个简单的交换img src，当浏览器调整为较小的屏幕，但由于某种原因我的代码不起作用。希望有人可以帮助解决这个问题。我将第二张图像放在与第一张图像相同的文件夹中。

由于

HTML代码：

<div class="body-bg">
   <img src="img-01.jpg" class="img-01">
    <h1>Example</h1>
    <h2>Example</h2>
</div>

jQuery代码：

$(function(){

    var $window = $(window);

function resize() {
    if ($window.width() < 750) {
        $('.img-01').attr('src','img-01.jpg');
    }
    else if ($window.width() > 750) {
        $('.img-01').attr('src','img-02.jpg');
    }
}

});

Answer 1

您需要在

中调用声明的resize函数

1）文件就绪功能和

2）关于窗口调整大小事件。

此外，您可以优化选择图像的代码，如下所示。

$(function(){

var $window = $(window);
var img_01= $('.img-01');
function resize() {
   img_01.attr('src',$window.width() < 750 ? 'img-01.jpg' :'img-02.jpg');
}
 resize();
 $window.on('resize', resize);
});

Answer 2

您实际上并未运行resize功能。尝试用以下内容替换你的javascript：

$(function(){
    var $window = $(window);

    function resize() {
        if ($window.width() < 750) {
            $('.img-01').attr('src','img-01.jpg');
        }
        else if ($window.width() > 750) {
            $('.img-01').attr('src','img-02.jpg');
        }
    }

    $window.on('resize', resize);
});

$window.on('resize', resize);在窗口调整大小事件上运行该函数。

Answer 3

您应该应用。resize（）jquery方法

$(window).on('resize', function(){
    var $window= $(this); //this = window 
    if ($window.width() < 750) {
        $('.img-01').attr('src','img-01.jpg');
    }else if ($window.width() > 750) {
        $('.img-01').attr('src','img-02.jpg');
    }
});

使用纯js：

window.onresize = function() {
    if (window.innerHeight < 750) {
        $('.img-01').attr('src','img-01.jpg');
    }
    if (window.innerWidth <= 1280) {
        $('.img-01').attr('src','img-02.jpg');
    }
}

Answer 4

你忘了听这样的调整大小事件：

$(function() {   

  var $window = $(window);

  function resize() {
    if ($window.width() < 750) {
      $('.img-01').attr('src', 'img-01.jpg');
    } else if ($resize()window.width() > 750) {
      $('.img-01').attr('src', 'img-02.jpg');
    }
  }

  resize();

  $window.on("resize", function() {
    resize();
  });
});

Answer 5

也许不使用JavaScript，考虑使用CSS的@media吗？根据{{3}}移动浏览器应该尊重@media，而不是下载不必要的图像。

"LogonTime": "2016-08-09T04:48:00"

jQuery图像交换问题

5 个答案: