title: net::ERR_INSUFFICIENT_RESOURCES error when adding numerous img elements to dom
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>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 <strong>that doesn't involve adding paging or "click her to load more" functionality</strong> to the image list?</p>
  
  <pre><code>// 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);
  }
  </code></pre>
  
  <p>And the render() code for the App.View.ImageView view:</p>
  
  <pre><code>render: function () {
      var renderedTemplate= theTemplate(this.model.toJSON());
      this.$el.html(renderedTemplate);
      return this;
  }
  </code></pre>
  
  <p>And the template used by App.View.ImageView (this gets compiled only once using _.template):</p>
  
  <pre><code>&lt;script type="text/template" id="thumb-template"&gt;          
          &lt;a href="&lt;%= ImageUrl%&gt;"&gt;&lt;img src="&lt;%= ImageUrl%&gt;" /&gt;&lt;/a&gt;
          &lt;div class="delete"&gt;&lt;/div&gt;
  &lt;/script&gt;
  </code></pre>