使用Jquery调整窗口大小后更改图像

Jquery代码有一些问题。我想根据窗口宽度更改页面上的图像。。。

下面的代码几乎符合我的要求，但有一个错误——它准备了多个图像。。。在我重新调整浏览器大小后，它会产生越来越多的克隆。

如果你能给我任何帮助，我将不胜感激

这是我的代码

(function ($) {
    var $window = $(window),
        $img2 = $('#img2');
    $img4 = $('#img4');
    function resize() {
        if ($window.width() < 750) {
            $img2.remove()
            $('.illu').prepend('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg"  width="100%"/>')
        } else if ($window.width() > 750) {
            $img4.remove()
            $('.illu').prepend('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg"  width="100%"/>')
        }
    }
    $window.resize(resize)
        .trigger('resize');
})(jQuery);

如果图像在同一个地方，而你实际上只是想替换它们，你可以只拥有一张图片并更改来源：

var $window = $(window),
    $img = $('#img');
function resize() {
    if ($window.width() < 750) {
        $img.attr('src', 'img/illu4.jpg');
    }
    else if ($window.width() > 750) {
        $img.attr('src', 'img/illu2.jpg');
    }
}

另一个更好的选择是根据需要隐藏/显示它们：

var $window = $(window),
    $img2 = $('#img2');
    $img4 = $('#img4');
function resize() {
    if ($window.width() < 750) {
        $img2.hide()
        $img4.show()
    } else if ($window.width() > 750) {
        $img2.show()
        $img4.hide()
    }
}

您需要将$img2&调整大小事件函数内部的$img4选择器：

jQuery(function ($) {
    var $window = $(window);
    function resize() {
        var $img2 = $('#img2');
        var $img4 = $('#img4');
        if ($window.width() < 750) {
            $img2.remove()
            $('.illu').prepend('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg"  width="100%"/>')
        } else if ($window.width() > 750) {
            $img4.remove()
            $('.illu').prepend('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg"  width="100%"/>')
        }
    }
    $window.resize(resize)
        .trigger('resize');
});

当您移除它们时，您的引用将被破坏，并在后续移除时在DOM中留下任何新图像。

注意：我还将IIFE语法(function($){YOUR CODE HERE})(jQuery);切换为更安全的DOM就绪快捷方式格式：jQuery(function($){YOUR CODE HERE});。

正如Banana所建议的，您最好不要创建和删除图像，而是隐藏/显示/重用图像，但这只是为了解决代码的实际问题：(

function resize() {
    if ($window.width() < 750) {
        $img2.remove()
        $img4 = $('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg"  width="100%"/>').prependTo('.illu');
    } else if ($window.width() > 750) {
        $img4.remove()
        $img2 = $('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg"  width="100%"/>').prependTo('.illu');
    }
}

你可以试试这样的东西。调整正文大小时，将丢失引用。

相关内容

最新更新

热门标签：