Fix #1744: Enhance zoom cache temporary url to use loader image

CHANGE.md

@@ -5,6 +5,7 @@ Change Log: `bootstrap-fileinput`
 
 **Date**: _under development_
 
+- (enh #1744): Enhance zoom cache temporary url to use loader image.
 - (enh #1741): Fix zoom cache 404 console warnings.
 
 ## version 5.2.3

examples/index-bs5.html

@@ -182,9 +182,9 @@
             "http://lorempixel.com/640/360/transport/3"
         ],
         initialPreviewConfig: [
-            {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1, zoomData: 'http://lorempixel.com/1920/1080/transport/1'},
-            {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2, zoomData: 'http://lorempixel.com/1920/1080/transport/2'},
-            {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3, zoomData: 'http://lorempixel.com/1920/1080/transport/3'}
+            {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1, zoomData: 'http://lorempixel.com/1920/1080/transport/1', description: '<h5>NUMBER 1</h5> The first choice for transport. This is the future.'},
+            {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2, zoomData: 'http://lorempixel.com/1920/1080/transport/2', description: '<h5>NUMBER 2</h5> The second choice for transport. This is the future.'},
+            {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3, zoomData: 'http://lorempixel.com/1920/1080/transport/3', description: '<h5>NUMBER 3</h5> The third choice for transport. This is the future.'}
         ]
     }).on('filebatchpreupload', function(e, data) {
         return {

js/fileinput.js

@@ -22,12 +22,15 @@
     }
 }(function ($) {
     'use strict';
+
     $.fn.fileinputLocales = {};
     $.fn.fileinputThemes = {};
+
     if (!$.fn.fileinputBsVersion) {
         $.fn.fileinputBsVersion = (window.Alert && window.Alert.VERSION) ||
             (window.bootstrap && window.bootstrap.Alert && bootstrap.Alert.VERSION) || '3.x.x';
     }
+
     String.prototype.setTokens = function (replacePairs) {
         var str = this.toString(), key, re;
         for (key in replacePairs) {
@@ -45,14 +48,17 @@
         };
     }
 
-    var $h, FileInput;
+    var $h, FileInput, getLoadingUrl = function () {
+        var src = document.currentScript.src, srcPath = src.substring(0, src.lastIndexOf("/"));
+        return srcPath.substring(0, srcPath.lastIndexOf("/") + 1) + 'img/loading.gif'
+    };
 
     // fileinput helper object for all global variables and internal helper methods
     $h = {
         FRAMES: '.kv-preview-thumb',
         SORT_CSS: 'file-sortable',
         INIT_FLAG: 'init-',
-        ZOOM_VAR: '?kvTemp__2873389129__=', // used to prevent 404 errors in URL parsing
+        ZOOM_VAR: getLoadingUrl() + '?kvTemp__2873389129__=', // used to prevent 404 errors in URL parsing
         OBJECT_PARAMS: '<param name="controller" value="true" />\n' +
             '<param name="allowFullScreen" value="true" />\n' +
             '<param name="allowScriptAccess" value="always" />\n' +