我有一个很长的页面,可以在用户滚动时动态加载图像.
但是,如果用户快速滚动离开页面的某个部分,我不希望图像继续加载到页面中现在看不到的部分.
除了图像加载之外,页面上还有许多其他请求同时发生,因此在滚动事件上触发一个钝的window.stop()是不可接受的.
我已经尝试删除和清除不再在视图中的图像的img src属性,但是,由于请求已经启动,图像继续加载.
请记住,当用户短暂滚动浏览页面的那一部分时,图像src已填充.一旦过去,我无法在不使用window.stop()的情况下从停止加载中获取该图像.清除src不起作用.(Chrome&FF)
类似的帖子我发现接近,但似乎没有解决这个问题:
我正在动态加载(大)图像以绘制到html5画布,如下所示:
var t = new Image();
t.onload = ...
t.src = 'http://myurl';
但每隔一段时间就想完全取消图像请求.
只有这样,我来到了被设置src到''.即
t.src = ''
这适用于许多浏览器,但似乎只有Firefox实际上取消了对图像的http请求.
我通过禁用缓存并启用"模拟调制解调器速度"来测试Fiddler2.然后运行小提琴来测试取消图像请求.(我很想听听关于如何测试这个的其他想法)
我知道有办法取消所有请求(如在这个问题中),但我只想取消一个.
有关其他方式(特别是在移动浏览器上)的任何想法吗？
当所有其他浏览器(IE7,8,9,FF,Opera和Safari)都重复调用它时,为什么Chrome只调用img元素的onerror事件？
有没有办法强制它再次重复攻击(在Chrome中)？
HTML:
<div id="thisWorks">
this works in Chrome. onerror event is called once.
<img src="http://www.asdfjklasdfasdf.com/bogus1.png"
onerror="fixit(this);"
rsrc="http://eatfrenzy.com/images/success-tick.png" />
</div>
<div id="thisDoesNotWork">
this does not work in Chrome. onerror event is not called twice.
<img src="http://www.asdfjklasdfasdf.com/bogus1.png"
onerror="fixit(this);"
rsrc="http://www.asdfjklasdfasdf.com/bogus2.png|http://eatfrenzy.com/images/success-tick.png" />
</div>
JAVASCRIPT:
function fixit(img)
{
var arrPhotos = img.getAttribute('rsrc').split('|');
// change the img src to the next available
img.setAttribute('src', arrPhotos.shift());
// now put back the image list (with one less) into the rsrc attr
img.setAttribute('rsrc', arrPhotos.join('|'));
return true;
}
编辑: …
假设我有两个手风琴标签.第一个加载数百个图像,并在页面加载时打开.
如果用户点击第二个手风琴选项卡,我希望能够停止下载图像.是否通过js更改图像的src属性会阻止图像下载？或者请求是否一直持续到完成并且不显示在页面上？
我正在为图像构建一个延迟加载组件.但我设置状态有问题.我得到的只能更新已安装或安装的组件错误,但我在setState里面使用componentDidMount,这应该可以让我避免这样的错误.
这是我的代码:
export default class Images extends React.Component {
constructor(props) {
super(props);
this.element = null;
this.state = {
loaded: false,
height: 0
};
}
componentDidMount() {
this.element = findDOMNode(this);
this.loadImage();
}
getDimensions() {
const w = this.element.offsetWidth;
let initw = 0;
let inith = 0;
let result;
const img = new Image();
img.src = this.props.url;
img.onload = (e) => {
initw = e.path[0].width;
inith = e.path[0].height;
result = (w / initw) * inith;
setTimeout(() …我正在做一些基本的 ajax 请求来更改页面，例如：
$(document.body).on('click', ".paging a", function (e) {
$.ajax({
type: "GET",
url: $this.attr('href'),
success: function (data) {
$("#main-content").html(data);
}
});
e.preventDefault();
return true;
});
ajax 请求调用的 URL 返回 HTML，有时此 HTML 包含 30-40 个<img>图像。
我遇到的问题是，如果您快速连续单击两个页面，浏览器会等待加载上一个 ajax 请求的 HTML 中的所有图像，直到进行下一个 XHR 调用，此时会出现延迟。
有没有办法将 XHR 请求优先于图像？基本上，如果单击另一个页面，我希望所有当前请求停止并立即执行 XHR 请求。据我所知，发生这种情况是因为浏览器对一个域发出的异步请求数量有限制（例如 chrome 为 6），如果我将图像更改为使用子域，它可能会修复它，但我正在尝试找到一种方法来做到这一点，而不必求助于子域。
（更新：之前我以为是React Router导致的这个问题，但是我把React Router从代码中剥离了，问题依旧，所以我彻底修改了这个问题。）
我有分页页面，每页显示图像列表。（“页面”是指可见的完整内容，不是单独的 html 文件/url。）我想以有效的方式浏览这些页面。
如果我在页面中导航得足够快，则在导航到下一页之前，并非所有图像都会加载到当前页面中。我希望浏览器在导航到下一页时取消所有未完成的图像下载。但这不会发生，浏览器会保留所有未完成的图像等待下载，直到它们全部下载完毕。然后我导航到的页面的图像将被下载。这会导致很大的延迟和带宽浪费。
是否可以取消下载上一页的“待处理”图像？
要对此进行测试，请使用浏览器开发人员工具中的“网络”选项卡。还要选择“禁用缓存”并将节流阀（开发人员工具中的下载速度）设置为“慢速 3G”之类的慢速，否则图像将被加载得太快也看到问题。然后浏览页面并看到待处理图像列表正在堆积，然后单击“禁用图像”按钮。然后，屏幕上将看不到任何图像，但浏览器仍然打开大量待处理的图像下载，这会浪费带宽并导致需要渲染新图像时出现延迟。
你可以在这里测试代码：https : //codepen.io/Devabc/pen/PowjqwZ
//This code is using imgur images to demonstrate.
class Page extends React.Component {
state = {
pageNr: 1,
imagesEnabled: true
};
onLinkClick = event => {
const number = event.target.dataset.value;
console.log("Number: " + number);
this.setState({pageNr: number});
};
onButtonClick = event => {
console.log("toggling images");
this.setState(prevState => {
return {imagesEnabled: ! prevState.imagesEnabled};
});
};
render() {
const links = _.range(0, 5).map(number => { …