[New Tab Page] Don't show tiles until all images are loaded.

chrome/browser/resources/local_ntp/most_visited_single.js

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
  // Single iframe for NTP tiles.
 (function() {
 'use strict';
 
 
 /**
@@ skipping 96 matching lines @@
 
 
 /**
  * Down counts the DOM elements that we are waiting for the page to load.
  * When we get to 0, we send a message to the parent window.
  * This is usually used as an EventListener of onload/onerror.
  */
 var countLoad = function() {
   loadedCounter -= 1;
   if (loadedCounter <= 0) {
+    showTiles();
     logEvent(LOG_TYPE.NTP_TILE_LOADED);
     window.parent.postMessage({cmd: 'loaded'}, DOMAIN_ORIGIN);
     loadedCounter = 1;
   }
 };
 
 
 /**
  * Handles postMessages coming from the host page to the iframe.
  * Mostly, it dispatches every command to handleCommand.
@@ skipping 13 matching lines @@
  * Handles a single command coming from the host page to the iframe.
  * We try to keep the logic here to a minimum and just dispatch to the relevant
  * functions.
  **/
 var handleCommand = function(data) {
   var cmd = data.cmd;
 
   if (cmd == 'tile') {
     addTile(data);
   } else if (cmd == 'show') {
-    showTiles();
+    countLoad();
     hideOverflowTiles(data);
-    countLoad();
   } else if (cmd == 'updateTheme') {
     updateTheme(data);
   } else if (cmd == 'tilesVisible') {
     hideOverflowTiles(data);
   } else {
     console.error('Unknown command: ' + JSON.stringify(data));
   }
 };
 
 
@@ skipping 211 matching lines @@
         thumb.classList.add('failed-img');
         thumb.removeChild(img);
         logEvent(LOG_TYPE.NTP_THUMBNAIL_ERROR);
       });
       thumb.appendChild(img);
       logEvent(LOG_TYPE.NTP_THUMBNAIL_TILE);
     } else {
       thumb.classList.add('failed-img');
     }
   } else { // THUMBNAILS
-    var thumb = tile.querySelector('.mv-thumb');
-    var img = document.createElement('img');
-    var loaded = false;
-
     // We keep track of the outcome of loading possible thumbnails for this
     // tile. Possible values:
     //   - null: waiting for load/error
     //   - false: error
     //   - a string: URL that loaded correctly.
     // This is populated by acceptImage/rejectImage and loadBestImage
     // decides the best one to load.
     var results = [];
+    var thumb = tile.querySelector('.mv-thumb');
+    var img = document.createElement('img');
+    var loaded = false;
 
     var loadBestImage = function() {
       if (loaded) {
         return;
       }
-      for (i = 0; i < results.length; ++i) {
+      for (var i = 0; i < results.length; ++i) {
         if (results[i] === null) {
           return;
         }
         if (results[i] != false) {
           img.src = results[i];
           loaded = true;
           return;
         }
       }
       thumb.classList.add('failed-img');
       thumb.removeChild(img);
       logEvent(LOG_TYPE.NTP_THUMBNAIL_ERROR);
+      countLoad();
     };
 
     var acceptImage = function(idx, url) {
       return function(ev) {
         results[idx] = url;
         loadBestImage();
       };
     };
 
     var rejectImage = function(idx) {
       return function(ev) {
         results[idx] = false;
         loadBestImage();
       };
     };
 
+    img.title = data.title;
+    img.classList.add('thumbnail');
+    loadedCounter += 1;
+    img.addEventListener('load', countLoad);
+    img.addEventListener('error', countLoad);
+    img.addEventListener('error', function(ev) {
+      thumb.classList.add('failed-img');
+      thumb.removeChild(img);
+      logEvent(LOG_TYPE.NTP_THUMBNAIL_ERROR);
+    });
+    thumb.appendChild(img);
+    logEvent(LOG_TYPE.NTP_THUMBNAIL_TILE);
+
     // Get all thumbnailUrls for the tile.
     // They are ordered from best one to be used to worst.
     for (var i = 0; i < data.thumbnailUrls.length; ++i) {
       results.push(null);
     }
     for (var i = 0; i < data.thumbnailUrls.length; ++i) {
       if (data.thumbnailUrls[i]) {
         var image = new Image();
         image.src = data.thumbnailUrls[i];
         image.onload = acceptImage(i, data.thumbnailUrls[i]);
         image.onerror = rejectImage(i);
       } else {
         rejectImage(i)(null);
       }
     }
 
-    img.title = data.title;
-    img.classList.add('thumbnail');
-    loadedCounter += 1;
-    img.addEventListener('load', countLoad);
-    img.addEventListener('error', countLoad);
-    img.addEventListener('error', function(ev) {
-      thumb.classList.add('failed-img');
-      thumb.removeChild(img);
-      logEvent(LOG_TYPE.NTP_THUMBNAIL_ERROR);
-    });
-    thumb.appendChild(img);
-    logEvent(LOG_TYPE.NTP_THUMBNAIL_TILE);
-
     var favicon = tile.querySelector('.mv-favicon');
     if (data.faviconUrl) {
       var fi = document.createElement('img');
       fi.src = data.faviconUrl;
       // Set the title to empty so screen readers won't say the image name.
       fi.title = '';
       loadedCounter += 1;
       fi.addEventListener('load', countLoad);
       fi.addEventListener('error', countLoad);
       fi.addEventListener('error', function(ev) {
@@ skipping 50 matching lines @@
     var html = document.querySelector('html');
     html.dir = 'rtl';
   }
 
   window.addEventListener('message', handlePostMessage);
 };
 
 
 window.addEventListener('DOMContentLoaded', init);
 })();