加入大量的IMG元素DOM时净:: ERR_INSUFFICIENT_RESOURCES错误 [英] net::ERR_INSUFFICIENT_RESOURCES error when adding numerous img elements to dom

问题描述

我使用的是一个网站，是pretty图像重jQuery和Backbone.js的。该网站的核心功能涉及到很多很多非常小的图像（150x180px JPG文件）。图像列表使用Backbone.js的集合都抓取进来通过AJAX / JSON。那么对于集合中的每个型号也就是获取呈现，其中包含一个img元素的视图。那么该视图被添加到DOM。

有一个用户特别是有数千张图片 - 超级相对多少图像我们大部分的普通用户都有一个边缘的情况下。当该用户的图像数据加载，浏览器就不能处理加载的所有图像，至少在路上我们目前的code ++工程。大约有一半的图像加载还好最终，但是浏览器（我使用Chrome 35）几分钟没有响应。图像的另一半无法加载，浏览器控制台显示为不加载图像网:: ERR_INSUFFICIENT_RESOURCES错误。

下面是我们的加载图像code的重要组成部分。任何人都可以提供一个解释，为什么在技术上本图片加载失败情况，并提供解决方案的不涉及添加分页或点击她加载更多功能以图像列表？

  //呈现的图像视图内
渲染：功能（）{
    this.collection.each（this.addOne，这一点）;
    返回此;
}，
addOne：功能（imgModel）{
    VAR imgView =新App.Views.ImageView（{模式：imgModel}）;
    这$ el.append（imgView.render（）EL）;
}
 

和渲染（）code为App.View.ImageView观点：

 渲染：功能（）{
    变种renderedTemplate = theTemplate（this.model.toJSON（））;
    这$ el.html（renderedTemplate）;
    返回此;
}
 

和由App.View.ImageView使用的模板（这被编译只有一次使用_.template）：

 ＆LT;脚本类型=文/模板ID =拇指模板＆GT;
        ＆所述; A HREF =＆下;％=的ImageUrl％gt;中与GT;＆下; IMG SRC =＆下;％=的ImageUrl％gt;中/＆GT;＆下; / A＆GT;
        ＆LT; D​​IV CLASS =删除＆GT;＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
 

解决方案

该方法的toJSON（）是浏览器非常昂贵，因为它克隆在模型中返回一个JSON重新presentation的属性。

  ...
//返回模型的`attributes`对象的副本。
的toJSON：功能（选件）{
  返回_.clone（this.attributes）;
}，
...
 

在某些情况下，我只是想展示我的模型的信息，我只是用了'属性'属性直接，这样可以节省处理的非常好的时机。

尝试更换在ImageView的文件中这一行：

  theTemplate（this.model.toJSON（））;
 

为

  theTemplate（this.model.attributes）;
 

希望这信息帮助。

I'm using jquery and backbone.js on a site that is pretty image heavy. The core functionality of the site involves many many fairly small images (150x180px jpg files). The list of images comes in via ajax/json using a backbone.js collection fetch. Then for each model in the collection there is a view that gets rendered which contains an img element. The view is then added to the dom.

There is one user in particular that has thousands of images - a super edge-case relative to how many images most of our normal users have. When this user's image data loads, the browser just can't handle loading all the images, at least in the way our current code works. About half of the images load okay eventually, but the browser (i'm using chrome 35) becomes unresponsive for several minutes. The other half of the images fail to load, and the browser console shows "net::ERR_INSUFFICIENT_RESOURCES" errors for the images that don't load.

Here is the essential part of our code that loads the images. Can anyone provide an explanation as to technically why this image loading failure happens, and offer a solution that doesn't involve adding paging or "click her to load more" functionality to the image list?

// 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);
}

And the render() code for the App.View.ImageView view:

render: function () {
    var renderedTemplate= theTemplate(this.model.toJSON());
    this.$el.html(renderedTemplate);
    return this;
}

And the template used by App.View.ImageView (this gets compiled only once using _.template):

<script type="text/template" id="thumb-template">          
        <a href="<%= ImageUrl%>"><img src="<%= ImageUrl%>" /></a>
        <div class="delete"></div>
</script>

解决方案

The method toJSON() is very expensive for the browsers as it clones the 'attributes' in the model to return a JSON representation.

...
// Return a copy of the model's `attributes` object.
toJSON: function(options) {
  return _.clone(this.attributes);
},
...

In some scenarios where I just wanted to display the information of my model, I simply used the 'attributes' property directly, it saves very good time of processing.

Try replacing this line in the ImageView file:

theTemplate(this.model.toJSON());

for

theTemplate(this.model.attributes);

Hope this information helps.

这篇关于加入大量的IMG元素DOM时净:: ERR_INSUFFICIENT_RESOURCES错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！