Question

我有一个按钮作为指示器，因此有两个状态;按此按钮切换状态，然后转到下一页。

按下按钮会调用一个处理此问题的JavaScript函数。

使用jQuery更改了按钮的'src'图像后，我希望用户看到图像更改，暂停几分之一秒，然后才能看到显示的下一页。

我发现在JavaScript函数返回之前图像不会明显改变，但这是在暂停之后，以及页面更改之后。即在按钮的功能退出之前，浏览器不会显示页面更改。

所以我希望在暂停之前让页面在浏览器中重新绘制。我尝试的所有解决方案都将页面刷新到服务器上的状态，并且我在jQuery中对它所做的任何更改都将丢失。

有没有办法强制重新绘制页面或按钮，这将遵循我在JavaScript / jQuery中对其所做的更改？

Answer 1

$("#YourButtonWhichTriggersChanges").click(function() {
    // page repaint code, image change, etc.

    setTimeout(function(){
        window.location.reload();
        // use window.location.href = "my/new/url.html";
        // or window.location.replace("my/new/url.html");  
        // to change the page instead of just reloading.
    }, 1000);
});

其中1000是您在刷新页面之前要等待的毫秒数。

编辑：我想你想要这个代码：

$("#ApproveButton").css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');

额外的反斜杠用于排除url参数中的单引号。

另一个编辑：这是我提供的两个解决方案的组合，应该可以工作：

$("#ApproveButton").click(function() {
        // actually repaint the button's background image
        $(this).css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');

        // change the page after 1000 milliseconds have gone by.
        setTimeout(function(){
            window.location.reload();
            /* use window.location.href = "my/new/url.html";
             * or window.location.replace("my/new/url.html");  
             * to change the page instead of just reloading.
             */
        }, 1000);
    });

在内容更改后强制页面刷新

1 个答案: