Question

我遇到了一个模糊的问题，我公司网站上的许多页面需要几秒钟到几分钟才能加载。通常，人们会期望浏览器的本机进度条继续旋转，直到所有未完成的请求都完成，但IE将在任何请求返回时停止进度条。是的，这必须与IE合作。我们的网站有一些javascript（jQuery），当另一个元素被鼠标悬停时，它会更改DOM元素的背景图像，这会导致IE发送请求，从而中断现有的进度条。

确切的事件顺序：

点击加载时间较长的链接（进度条正确旋转）
等待时在页面上移动鼠标，无意中触发图像更改（进度条停止）
客户抱怨页面已停止加载

那么，有什么想法吗？我认为一种方法是在按下链接时将鼠标光标更改为等待，如果按下浏览器的停止按钮，则将光标更改回正常光标。但是，如果用户按下停止按钮，则检测起来似乎不太容易。。。我能想到的唯一其他选择是在点击链接后停止更改背景图像，但这是一种非常蹩脚的方法。

感谢您的帮助：）

Answer 1

一种方法是将图片从$(document).ready移至$(document).load。

更好的解决方案将使用精灵作为具有开启和关闭状态的图像进行悬停，因此您无需更改图像源。这是使用jQuery处理精灵的快速示例：

css （假设图片为100x200，每个州为100x100）

.my-image { height: 100px; width: 100px; background: transparent url('/path/to/img.jpg') 0 0 no-repeat; overflow: hidden; }
.my-image-hover { background-position: 0 -100px !important; }

<强> jquery的

// add class hover to image
$('.my-image').hover(function() {
    $(this).addClass('my-image-hover');
}, function() {
    $(this).removeClass('my-image-hover');
});

IE - Javascript更改IMG SRC取消现有的加载栏

1 个答案: