我如何中止图像＆LT; IMG＆GT;不使用window.stop负载请求（） [英] How do I abort image <img> load requests without using window.stop()
问题描述
我有一个很长的网页，动态加载图像，用户滚动浏览。
I have a very long page that dynamically loads images as users scroll through.
然而，如果用户快速滚动远离页的某一部分，我不想图像继续装载在现在外的部分视图的网页。
However, if a user quickly scrolls away from a certain part of the page, I don't want the images to continue loading in that now out-of-view part of the page.
有很多其他的请求发生在页面上同时除了图像加载的，所以在滚动事件钝window.stop（）射击是不可接受的。
There are lots of other requests happening on the page simultaneously apart from image loading, so a blunt window.stop() firing on the scroll event is not acceptable.
我试图删除和放大器;清除IMG SRC属性的图像，将不再在视图，然而，因为该请求已经启动时，图像继续加载
I have tried removing & clearing the img src attributes for images that are no longer in view, however, since the request was already started, the image continues to load.
记住图像的src被填写为简单地滚动了页面的那部分用户。一旦过去，虽然，我不能得到停止加载该图像，而无需使用window.stop（）。结算SRC没有工作。 （Chrome浏览器和FF）
Remember that the image src was filled in as the user briefly scrolled past that part of the page. Once past though, I couldn't get that image from stop loading without using window.stop(). Clearing src didn't work. (Chrome & FF)
类似的帖子中，我发现，亲近，但似乎并没有解决这个问题：
Similar posts I found that get close, but don't seem to solve this problem:
- <一个href="http://stackoverflow.com/questions/1339901/stop-loading-of-images-with-javascript-lazyload">Stop加载图像的javascript（lazyload）？
- 的Javascript：取消/停止图像请求
- 如何取消加载图片
- Stop loading of images with javascript (lazyload)?
- Javascript: Cancel/Stop Image Requests
- How to cancel an image from loading
推荐答案
你所试图做的是错误的做法，因为提到的 nrabinowitz 。你不能只是取消图像的加载过程（即的src 属性设置为空字符串的不是一个好主意）。事实上，即使你可以，这样做只会使事情变得最糟糕的，因为你的服务器将不断地发送数据，将被取消，增加了它的负荷系数，慢下来。另外，还要考虑这个：
What you are trying to do is the wrong approach, as mentioned by nrabinowitz. You can't just "cancel" the loading process of an image (setting the src attribute to an empty string is not a good idea). In fact, even if you could, doing so would only make things worst, as your server would continually send data that would get cancelled, increasing it's load factor and slow it down. Also, consider this:
- 如果您的用户滚动疯狂地上下页，他/她会期待一些加载延迟。
- 有一个超时延迟：开始加载页面的部分之前（前200毫秒）是pretty的可以接受的，多少次会一站后在页面上200毫秒的间隔跳？即使它碰巧的是，它回来给点1
- 有多大你的作品？即使是一个缓慢的服务器可以处理大约几十每秒3KB thunbnails的。如果你的网站有更大的图像，可以考虑使用一些成分低，高解析度的图像，例如灯箱
通常情况下，电脑的问题只是设计上的问题。
Often, computer problems are simply design problems.
** 修改 **
下面有一个想法：
-
你的页面应该显示
DIV容器与预期图像尺寸（使用CSS样式）的宽度和高度。里面每个DIV，添加一个链接。例如：
your page should display
DIVcontainers with the width and height of the expected image size (use CSS to style). Inside of eachDIV, add an link. For example :
<div class="img-wrapper thumbnail">
<a href="http://www.domain.com/path/to/image">Loading...</a>
</div>
添加这个JavaScript（未经检验的，这个想法是自描述）
Add this Javascript (untested, the idea is self describing)
$(function() {
var imgStack;
var loadTimeout;
$(window).scroll(function() {
imgStack = null;
if (loadTimeout) clearTimeout(loadTimeout);
loadTimeout = setTimeout(function() {
// get all links visible in the view port
// should be an array or jQuery object
imgStack = ...
loadNextImage();
}, 200); // 200 ms delay
});
function loadNextImage() {
if (imgStack && imgStack.length) {
var nextLink = $(imgStack.pop()); // get next image element
$('<img />').attr('src', nextLink.attr('href'))
.appendTo(nextLink.parent())
.load(function() {
loadNextImage();
});
// remove link from container (so we don't precess it twice)
nextLink.remove();
}
};
});
这篇关于我如何中止图像＆LT; IMG＆GT;不使用window.stop负载请求（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
