如何在不使用window.stop()的情况下中止图像<img>加载请求

Question

如何在不使用window.stop()的情况下中止图像<img>加载请求

Eva*_*van 46 html javascript ajax jquery image

我有一个很长的页面,可以在用户滚动时动态加载图像.

但是,如果用户快速滚动离开页面的某个部分,我不希望图像继续加载到页面中现在看不到的部分.

除了图像加载之外,页面上还有许多其他请求同时发生,因此在滚动事件上触发一个钝的window.stop()是不可接受的.

我已经尝试删除和清除不再在视图中的图像的img src属性,但是,由于请求已经启动,图像继续加载.

请记住,当用户短暂滚动浏览页面的那一部分时,图像src已填充.一旦过去,我无法在不使用window.stop()的情况下从停止加载中获取该图像.清除src不起作用.(Chrome&FF)

类似的帖子我发现接近,但似乎没有解决这个问题:

Answer 1

Yan*_*hon 17

正如nrabinowitz所提到的,你要做的是错误的方法.你不能只是"取消"图像的加载过程(将src属性设置为空字符串不是一个好主意).事实上,即使你可以,这样做只会让事情变得更糟,因为你的服务器会不断发送会被取消的数据,增加它的负载因子并减慢它的速度.另外,考虑一下:

如果您的用户在页面上下滚动,他/她将会遇到一些加载延迟.
在开始加载页面的一部分之前有一个超时延迟(例如:200毫秒)是可以接受的,并且在页面上200毫秒间隔后停止和跳转多少次？即使它发生了,它又回到了第1点
你的影像有多大？即使是速度慢的服务器也可以每秒服务几十个3Kb的thunbnails.如果您的网站有更大的图像,请考虑使用一些组件(如lightBox)使用低分辨率和高分辨率图像

通常,计算机问题只是设计问题.

**编辑**

这是一个想法:

您的页面应显示DIV具有预期图像大小的宽度和高度的容器(使用CSS来设置样式).在每个内部DIV,添加一个链接.例如 :
```
<div class="img-wrapper thumbnail">
   <a href="http://www.domain.com/path/to/image">Loading...</a>
</div>
```
Run Code Online (Sandbox Code Playgroud)

添加此Javascript(未经测试,该想法是自我描述)

$(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();
   }
};

});

Run Code Online (Sandbox Code Playgroud)

Answer 2

Gua*_*ard 12

好吧,我的想法:

1)启动对图像的AJAX请求,如果成功,则图像进入浏览器缓存,一旦设置'src'属性,图像将从缓存中显示

2)你可以中止XHR

我写了一个小型服务器,快速模拟大量的图像下载(它实际上只等待20秒,然后返回一个图像).然后我在我的HTML中有这个:

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                width: 469px;
                height: 428px;
                background-color: #CCC;
                border: 1px solid #999;
            }
        </style>
    </head>

    <body>
        <img data-src="./img" src="" />
        <br />
        <a id="cancel" href="javascript:void(0)">CANCEL</a>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(function () {
                var xhr, img = $('img'), src = img.data('src');

                xhr = $.ajax(src, {
                    success: function (data) { img.attr('src', src) }
                });

                $('#cancel').click(function (){
                    xhr.abort();
                })
            });
        </script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，1 月前
查看次数：	24697 次
最近记录：	8 年，3 月前