Commits

Adam Gomaa  committed 281d028

Don't show images on page load, causes IO spike when viewing a bunch of screenshots. Click to show instead.

  • Participants
  • Parent commits 6ecc6ad

Comments (0)

Files changed (3)

File notedir/notes.css

     background-color: #fcc;
     color: #f00;
 }
+.note .click-to-show
+{
+    width: 25%;
+    margin: auto;
+    cursor:pointer;
+    background-color: #ddd;
+    color: #666;
+    font-size: 18px;
+    padding: 10px 30px;
+    font-weight: bold;
+    border: solid #ccc 1px;
+    font-family: monospace;
+    text-align: center;
+}
+.note .click-to-show:hover
+{
+    border-color: #aaa;
+    color: #444;
+}

File notedir/notes.html

     <div id="note-image-template" style="display: none;">
       <div class="note" data-note-timestamp="<%- timestamp %>" >
         <h3><a href="<%= url %>"><%- timestamp %></a></h3>
+        <div class="click-to-show">click to show image</div>
         <img style="max-width: 100%;display:block;margin:auto;">
         <% if(show_delete){ %><div class="delete">Delete</div><% } %>
       </div>

File notedir/notes.js

         template: get_template("#note-template"),
         events: {
             "click .delete": "deleteNote",
-            "click .note-text": "startEdit"
+            "click .note-text": "startEdit",
         },
         initialize: function(options){
             _.bindAll(this, "startEdit");
     var ImageNoteView = BaseNoteView.extend({
         tagName: "div",
         template: get_template("#note-image-template"),
+        events: {
+            "click .click-to-show": "showImage"
+        },
         initialize: function(options){
             this.constructor.__super__.initialize.apply(this, [options])
-            _.bindAll(this, "template_context", "render");
+            _.bindAll(this, "template_context", "render", "showImage");
         },
         render: function(){
             $(this.el).html(this.template(this.template_context()));
-            this.$("img").attr("src", this.model.fileurl());
+            if(this.options.show_image){
+                this.showImage();
+            }
             return this;
         },
         template_context: function(){
             return $.extend({}, this.model.attributes, {url: this.model.hashurl()}, this.options);
         },
+        showImage: function(){
+            var self = this;
+            this.$("img").bind("load", function(){
+                self.$(".click-to-show").hide();
+            }).attr("src", this.model.fileurl());
+        }
+
     });
 
 
             if(note.get("text")){
                 var view = new NoteView({model: note, show_delete: true});
             }else{
-                var view = new ImageNoteView({model: note, show_delete: true});
+                var view = new ImageNoteView({model: note, show_delete: true, show_image: true});
             }
             this.$(".notes-container").empty().append(view.render().el);
             this.$(".notes-pagination").hide();