Question

我有一个jquery语句，它根据屏幕大小替换图像

它只适用于刷新。我希望它在用户通过我的参数集调整屏幕大小时自动运行。

我无法弄清楚如何做到这一点。

JQUERY

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var screenWidth = $(window).width();
        if ((screenWidth) < 769) {
            $("#logoHolder img").attr("src" , "images/payday_ira_logo_stacked_web.png")
        } else {
            $("#logoHolder img").attr("src", "images/payday_logo_long_web.png")
        }
    });

HTML

<div class="d3-d4 m1" id="logoHolder">
    <img src="images/payday_logo_long_web.png" alt="Pay Day IRA" />
</div>

Answer 1

试试这个：

window.onresize = function(event) {
    // your code goes here
};

Google“javascript screenresize event”

Answer 2

如前所述，您希望将函数绑定到window.onresize方法。但有一点需要注意：每次调整大小时都不要更改img SRC属性！一种方法是在图像上切换一个类，而不仅仅是它的src。 I've updated your Fiddle

以下是我更新脚本的方法：

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

function imgSwap() {
    var screenWidth = $(window).width(),
        $image = $("#logoHolder img");
    if (screenWidth < 769) {
        if ($image.hasClass("alt-img")) {
            $image.attr("src", "http://placehold.it/350x150").removeClass("alt-img");
        }
    } else {
        if (!$image.hasClass("alt-img")) {
            $image.attr("src", "http://placehold.it/150x50").addClass("alt-img");
        }
    }
}

如何在屏幕大小动态而不是仅在刷新时更换jquery图像？

2 个答案: