Fix for red spinner: now not displayed by default

_locales/en/messages.json

@@ -367,6 +367,14 @@
         "message": "%",
         "description": "[options] Unit name (percentage) for opacity option"
     },
+    "optDisplayImageLoaderTooltip": {
+        "message": "Display a little spinner as image is loading (green:loading, orange:skipped, red:error). Orange & red spinners are optional.",
+        "description": "[options] Tooltip for display image loader option"
+    },
+    "optDisplayImageLoader": {
+        "message": "Display image loader",
+        "description": "[options] Display image loader option"
+    },    
     "optUseSeparateTabOrWindowForUnloadableUrlsTooltip": {
         "message": "Useful for HTTPS sites such as Google Images that prevent loading of HTTP images",
         "description": "[options] Tooltip for using separate tab or window for unloadable urls option"

html/options.html

@@ -308,6 +308,14 @@ <h1 class="ten columns text-center" data-i18n="optTitle"></h1>
                                         <input class="xnarrow text input" type="text" id="txtPicturesOpacity"><span class="adjoined xnarrow" data-i18n="optOpacityUnitName"></span>
                                     </label>
                                 </li>
+                                <div class="ttip" data-i18n-tooltip="optDisplayImageLoaderTooltip">
+                                    <li class="field">
+                                        <label class="checkbox" for="chkDisplayImageLoader">
+                                            <input type="checkbox" id="chkDisplayImageLoader"><span></span>
+                                            <div style="display:inline" data-i18n="optDisplayImageLoader"></div>
+                                        </label>
+                                    </li>
+                                </div>
                                 <div class="ttip" data-i18n-tooltip="optDownloadFolderTooltip">
                                     <li class="append field">
                                         <label class="inline" style="padding-right:10px">

js/common.js

@@ -28,7 +28,7 @@ var factorySettings = {
     disabledPlugins : [],
     centerImages : false,
     frameBackgroundColor: "#ffffff",
-    displayImageLoader: true,
+    displayImageLoader: false,
     enlargementThresholdEnabled : true,
     enlargementThreshold : 2,
     displayedSizeThresholdEnabled : true,

js/hoverzoom.js

@@ -265,7 +265,7 @@ var hoverZoom = {
 
                 imgFullSize.width('auto').height('auto');
                 hz.hzImg.width('auto').height('auto');
-                hz.hzImg.css('visibility', 'visible');
+                //hz.hzImg.css('visibility', 'visible');
 
                 // image natural dimensions
                 imgDetails.naturalWidth = imgFullSize.width() * options.zoomFactor;
@@ -727,13 +727,17 @@ var hoverZoom = {
         function displayFullSizeImage() {
             cLog('displayFullSizeImage');
 
-            hz.hzImgLoader.remove();
-            hz.hzImgLoader = null;
+            if (hz.hzImgLoader) {
+                hz.hzImgLoader.remove();
+                hz.hzImgLoader = null;
+            }
 
             hz.hzImg.stop(true, true);
             hz.hzImg.offset({top:-9000, left:-9000});    // hides the image while making it available for size calculations
             hz.hzImg.empty();
 
+            hz.hzImg.css('visibility', 'visible');
+
             clearTimeout(cursorHideTimeout);
             hz.hzImg.css('cursor', 'none');
             hz.hzImg.css('pointer-events', 'none');
@@ -1656,10 +1660,16 @@ var hoverZoom = {
         }
     },
 
-    // create and display the loading image container
-
+    // handle the loading image spinner
+    // its color depends on loading staus:
+    // - green: loading started
+    // - orange: img skipped (reason depends on Options settings: image already big enough, etc)
+    // - red: an error occured (displayed in console)
     displayImgLoader:function (status, position) {
 
+        // orange & red spinners are optional
+        if (options.displayImageLoader == false && (status == 'skipped' || status == 'error')) return;
+
         // check that loader exists
         if (hoverZoom.hzImgLoader == null) {
             hoverZoom.hzImgLoader = $('<div id="hzImgLoader"><img src="' + chrome.extension.getURL('images/loading.gif') + '" style="opacity: 0.8; padding: 0; margin: 0" /></div>');

js/options.js

@@ -114,6 +114,7 @@ function saveOptions() {
     options.enableGalleries = $('#chkEnableGalleries')[0].checked;
     options.picturesOpacity = $('#txtPicturesOpacity')[0].value / 100;
     options.captionLocation = $('#selectCaptionLocation').val();
+    options.displayImageLoader = $('#chkDisplayImageLoader')[0].checked;    
     options.downloadFolder = $('#txtDownloadFolder')[0].value;
     options.useSeparateTabOrWindowForUnloadableUrlsEnabled = $('#chkUseSeparateTabOrWindowForUnloadableUrlsEnabled')[0].checked;
     options.useSeparateTabOrWindowForUnloadableUrls = $('#selectUseSeparateTabOrWindowForUnloadableUrls').val();