单击iPhone Safari时图像消失

Question

好的，奇怪的问题：

1）在iPhone（Safari浏览器）上转到此处：http://powellcreative.com/our-team/

2）单击任何团队图像以进入团队成员页面

3）单击浏览器上的后退按钮

4）图像现在在团队页面上消失

Answer 1

我知道这个问题有点陈旧，但我一直在寻找类似问题的解决方案，经过搜索，我找到了解决方案。希望这有助于其他人遇到同样的问题。问题是当你给iOS一个像onmouseover或onmouseout这样的javascript事件它不喜欢它时，主要是因为当你的手指“鼠标”在iOS中的一个元素时，你实际上是在点击它，所以这就是我来的解决方案在iOS中按下后退按钮后，似乎重新加载图像。

这是：

确保所有图像都在各自独立的div中，并带有与众不同的名称。 例如：

<div name="div1"><a href="dosomething"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></a></div> 

在页面的javascript头部分，您要插入此内容：

window.onpageshow = 
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<a href="dosomething"><img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";"></a>';
}
}

这将检查页面返回，因为Mobile Safari使用bfcache并将您的图像重新加载到div中。希望这有助于OP或其他人。