脚本只有在刷新后才能工作

script works only after refresh

本文关键字：工作 刷新 脚本      更新时间：2023-09-26

在第一页中，我有一个带有链接的图像，您可以点击它：

<div style="width: 97px; height: 130px;">
<a href="objects_lost.html?obj=images/dog.png">
<div>
<img src="images/dog.png" alt="" style="width: 100%; height: 100%;">
<p style="color: black; margin-top: 0px;">DOG</p>
</div>
</a>
</div>

当你点击它时，会打开一个新页面，显示你点击的图像。但它只在一次刷新后工作。

    <img src="" id="image"/>        
    <script type="text/javascript">
        function whatImg() {
            var str = getUrlVars()["obj"];
            document.getElementById('image').src = str;
        }
        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
                {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
                }
            return vars;
            }
        whatImg();
    </script>

有什么帮助吗？我使用JQuery Mobile

如果哈希发生更改，脚本将不会再次启动。您需要添加一个事件侦听器，如：

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

问题是您的JavaScript在页面加载完成之前就已运行。在刷新时，页面会从本地缓存加载（即更快），并且在脚本运行之前，图像元素已经准备好。如果您在本地服务器上运行代码，您可能会注意到，由于HTML的快速加载，它在第一次尝试时就可以工作。

正确的解决方案是让代码在加载后运行。在jQuery中，您可以这样做：

$( function() {
    whatImg();
});

这或多或少是的标准jQuery快捷方式

$(window).load( function () {
    whatImg();
});

应该注意的是，建议使用hashchange的答案是有效的，因为hashchange在第一页加载时触发。您的URL中实际上没有哈希。正确的解决方案是让脚本在加载后运行。

相关文章：