Question

在第一页中我有一个图片，其中包含一个可以点击它的链接：

<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

Answer 1

如果哈希值发生变化，脚本将不会再次触发。您需要添加一个事件监听器，如：

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

Answer 2

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

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

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

这或多或少是以下标准jQuery快捷方式：

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

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

脚本仅在刷新后才有效

2 个答案: