Javascript 如何中止映像<；img>；不使用window.stop（）加载请求_Javascript_Jquery_Html_Ajax_Image

Javascript 如何中止映像<；img>；不使用window.stop（）加载请求

javascript jquery html ajax image

Javascript 如何中止映像<；img>；不使用window.stop（）加载请求,javascript,jquery,html,ajax,image,Javascript,Jquery,Html,Ajax,Image,我有一个很长的页面，在用户滚动浏览时动态加载图像但是，如果用户快速滚动离开页面的某个部分，我不希望图像继续加载到该页面现在看不见的部分除了加载图像外，页面上还同时发生许多其他请求，因此不能接受在scroll事件上触发blunt window.stop（）命令我已经尝试删除和清除不再在视图中的图像的img src属性，但是，由于请求已经启动，图像继续加载请记住，图像src是在用户短暂滚动页面的该部分时填写的。但一旦过去，如果不使用window.stop（），我就无法从停止加载中获取该图像。

我有一个很长的页面，在用户滚动浏览时动态加载图像

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

除了加载图像外，页面上还同时发生许多其他请求，因此不能接受在scroll事件上触发blunt window.stop（）命令

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

请记住，图像src是在用户短暂滚动页面的该部分时填写的。但一旦过去，如果不使用window.stop（），我就无法从停止加载中获取该图像。清除src无效。（铬合金和FF）

我发现类似的帖子很接近，但似乎不能解决这个问题：

您尝试的方法是错误的，如所述。您不能只是“取消”图像的加载过程（将

src

属性设置为空字符串是错误的）。事实上，即使可以，这样做也只会让事情变得更糟，因为您的服务器会不断发送会被取消的数据，从而增加其负载系数并降低其速度。同样，考虑这个：

如果你的用户在页面上疯狂地上下滚动，他/她会期待一些加载延迟

在开始加载页面的一部分之前有一个超时延迟（例如：200毫秒）是可以接受的，一个页面在200毫秒间隔后会停止并跳转多少次？即使发生了，也回到了第一点

你的照片有多大？即使是速度较慢的服务器每秒也可以提供几十个3Kb的thunbnails。如果你的站点有更大的图像，考虑使用像

这样的组件使用低分辨率和高分辨率图像。通常，计算机问题只是设计问题

**编辑**

这里有一个想法：

您的页面应该显示具有预期图像大小宽度和高度的

DIV

容器（使用CSS设置样式）。在每个

DIV

中添加一个链接。例如：

<div class="img-wrapper thumbnail">
   <a href="http://www.domain.com/path/to/image">Loading...</a>
</div>

添加此Javascript（未经测试，想法是自我描述的）

$（函数（）{
var imgStack；
var加载超时；
$（窗口）。滚动（函数（）{
imgStack=null；
if（loadTimeout）cleartimout（loadTimeout）；
loadTimeout=setTimeout（函数（）{
//获取视图端口中可见的所有链接
//应该是数组或jQuery对象
imgStack=。。。
loadNextImage（）；
}，200）；//200毫秒延迟
});
函数loadNextImage（）{
if（imgStack和imgStack.length）{
var nextLink=$（imgStack.pop（））；//获取下一个图像元素
$（'


您可以使用ajax调用加载图像，如果用户退出，您可以中止调用。

在jQuery伪代码中是这样的（请原谅语法错误，这只是一个示例）：
1） 标记要加载的图像
$(".image").each( function(){
    if ( is_in_visible_area(this) ) { // check [1] for example
        $(this).addClass("load_me");
    } else {
        $(this).addClass("dont_load");
    }
});

2） 加载图像
ajax_requests = {};

$(".image.load_me").each( function(){
    // load image
    var a = $.ajax({
        url: 'give_me_photos.php',
        data: {img: photo_id},
        success: function(html){
            photo_by_id(photo_id), img.append(html);
        }
    });
    ajax_requests[photo_id] = a;

});

3） 取消从屏幕中加载这些内容
for( id in ajax_requests ) {
    if ( ! is_in_visible_area(id) ) {
        ajax_requests[id].abort();
    }
}

当然，还要添加一些检查，以确定图像是否已加载（例如，类“loaded”）
[1] 
[2] .
嗯，我的想法是：
1） 启动对图像的AJAX请求，如果成功，图像将进入浏览器缓存，设置“src”属性后，图像将从缓存中显示
2） 您可以中止XHR
我用express编写了一个微型服务器，模拟下载的大量图像（实际上只需等待20秒，然后返回一个图像）
<!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>


img{
宽度：469px；
高度：428px；
背景色：#CCC；
边框：1px实心#999；
}


$（函数（）{
var xhr，img=$（'img'），src=img.data（'src'）；
xhr=$.ajax（src{
成功：函数（数据）{img.attr（'src'，src）}
});
$（'#取消'）。单击（函数（）{
xhr.abort（）；
})
});
顺便说一句，另一个可能有效的想法是：
1） 创建一个新的iframe
2） iframe内部有开始加载图像的脚本，加载后，调用.parent
的方法
3） 需要时，使用iframe对象上的停止iframe内容加载
使用堆栈管理ajax请求（意味着您将使用串行加载而不是并行加载，但这是值得的）
在滚动停止时，等待300毫秒，然后将视图区域内的所有图像推入堆栈
每次用户滚动时，都会检查堆栈是否正在运行。（仅供参考-您可以停止对特定url的所有请求，而不是终止所有ajax调用。您还可以使用regex，这样它就不会停止页面上的任何其他请求）
如果现有堆栈正在运行，则弹出其中的所有图像，但最上面的图像除外
在所有ajax调用上-bind beforeSend（）事件从堆栈中删除该特定图像
现在已经很晚了，但我们在工作中也做了类似的事情——如果您需要详细的代码，请告诉我
干杯！
也许您可以通过一个php脚本来提供图像，该脚本将检查数据库中的一个字段（最好是一个memcached）这将指示停止加载。脚本将图像分成块，并在每个块之间暂停，并检查特定请求的停止标志是否为。如果设置了停止标志，则发送带有204 no内容的标题，一旦浏览器收到该标题，它将停止接收
不过，这可能有点过头了。
<!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>