我在一个图像较多的网站上使用jquery和backbone.js。该网站的核心功能涉及许多相当小的图像(150x180px jpg 文件)。图像列表通过 ajax/json 使用backbone.js 集合获取来获取。然后,对于集合中的每个模型,都有一个渲染的 View ,其中包含 img 元素。然后将 View 添加到 dom 中。
有一个用户拥有数千张图像 - 相对于我们大多数普通用户拥有的图像数量而言,这是一个 super 边缘情况。当该用户的图像数据加载时,浏览器无法处理加载所有图像,至少以我们当前代码的工作方式是如此。大约一半的图像最终加载正常,但浏览器(我使用的是 chrome 35)在几分钟内没有响应。另一半图像无法加载,浏览器控制台会针对未加载的图像显示“net::ERR_INSUFFICIENT_RESOURCES”错误。
这是我们加载图像的代码的基本部分。任何人都可以从技术上解释为什么会发生此图像加载失败,并提供一个不涉及向图像列表添加分页或“单击她以加载更多”功能的解决方案吗?
// inside the view that renders the images
render: function () {
this.collection.each(this.addOne, this);
return this;
},
addOne: function (imgModel) {
var imgView = new App.Views.ImageView({ model: imgModel});
this.$el.append(imgView.render().el);
}
以及 App.View.ImageView View 的 render() 代码:
render: function () {
var renderedTemplate= theTemplate(this.model.toJSON());
this.$el.html(renderedTemplate);
return this;
}
以及 App.View.ImageView 使用的模板(仅使用 _.template 编译一次):
<script type="text/template" id="thumb-template">
<a href="<%= ImageUrl%>"><img src="<%= ImageUrl%>" /></a>
<div class="delete"></div>
</script>
最佳答案
我相信这是影响您的错误:https://bugs.chromium.org/p/chromium/issues/detail?id=108055
从 2011 年到 2016 年,一直有关于此问题的讨论,并且仍在持续进行中。基本上Chrome无法在短时间内处理大量请求。
以下是对我的应用有一点帮助的内容:
- 您可以添加一个事件处理程序,例如
img.addEventListener("error",tryAgainLater)
但这并不能拯救 其他资源无法加载,因此您的脚本正在加载 数百张图像可能会干扰其他图像。 - 尝试缓存更多图像以减少网络请求数量。
- 改用 Firefox...显然不能告诉客户这一点。
以下是不起作用:
- 将图像合成到 Canvas 上并丢弃单个图像。这没有帮助,因为它与网络请求有关,而不是存储在内存中的图像。
- 在前一个图像完全加载之前,不会启动下一个请求。也许这是因为连接实际关闭或从内存(或其他资源)中删除需要时间。
尚未尝试:
- 通过 HTTP/2 或 SPDY 加载图像,其中有很多请求但只有一个连接。
- 在您的情况下,您可能可以内联图像以避免发出请求。示例来自 https://css-tricks.com/data-uris/ :
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
关于javascript - 向 dom 添加大量 img 元素时出现 net::ERR_INSUFFICIENT_RESOURCES 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24122506/