javascript中止Image的加载

最新推荐文章于 2024-08-02 22:18:37 发布

22262

最新推荐文章于 2024-08-02 22:18:37 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/qhlpptdyfn/article/details/115709516

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

在低网速环境下，长时间的网络图片请求会导致界面渲染阻塞。虽然可以通过超时时间中断XMLHttpRequest，但如何中止Image对象的请求成为一个问题。尝试设置Image.src为空串并未生效。据StackOverflow解答，一旦创建Image对象，其加载不受单个元素控制，无法单独中止，只能清空所有资源请求。为解决此类问题，可以考虑使用HTTP请求测速，或者实施图片懒加载策略以优化网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事情的起源是在工程中发现了一个bug，在低网速情况下请求网络图片资源时请求耗时会达到1分多钟，而这长时间的网络请求最后又导致了界面渲染被阻塞，首页一直白屏

如果是解决界面阻塞问题的话有很多方案，但令我困惑的是当我创建了一个Image对象时如何才能中止它的请求呢，
【不考虑用Image的话采用XMHttpRequest这些http请求封装的对象的话也是可以通过超时时间来中断的】

let ps = new Promise((resolve, reject) => {
    let image = new Image();
    let url = "http://xxxxx";
    image.src = url;
    let timeout = setTimeout(() => {
        image = null;
        reject(url);
    }, 500);
    image.onload=()=> {
        clearTimeout(timeout);
        resolve(url);
    }
});

这个是初始请求的大概代码，意图让图片加载有个5s的超时时间，但通过网络工具来看那个图片的加载一直都在，加载完成同时首页成功渲染
然后通过资料查找希望找到能中断image加载的方法，看一个帖子说使用image.src=""设置为空串就可以终止image加载，但实际使用时并没有起效

最后看了篇stackflow的解答感觉有点思路了sf的一个解答
Image()对象的创建相当于创建了标签(文档)，所以在界面渲染和资源加载时大概就是不受单个元素的控制，即我们没办法使得单个资源元素停止加载，只能用window.stop的来中当前页面的所有正在请求的资源

//cancel image downloads
if(window.stop !== undefined)
{
     window.stop();
}
else if(document.execCommand !== undefined)
{
     document.execCommand("Stop", false);
}