diff --git a/src/openseadragon.js b/src/openseadragon.js index 9b07d922..041dc7aa 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -185,7 +185,11 @@ * If 0, adjusts to fit viewer. * * @property {Number} [opacity=1] - * Default opacity of the tiled images (1=opaque, 0=transparent) + * Default proportional opacity of the tiled images (1=opaque, 0=hidden) + * Hidden images do not draw and only load when preloading is allowed. + * + * @property {Boolean} [preload=false] + * Default switch for loading hidden images (true loads, false blocks) * * @property {String} [compositeOperation=null] * Valid values are 'source-over', 'source-atop', 'source-in', 'source-out', @@ -1128,6 +1132,7 @@ function OpenSeadragon( options ){ // APPEARANCE opacity: 1, + preload: false, compositeOperation: null, placeholderFillStyle: null, diff --git a/src/tiledimage.js b/src/tiledimage.js index 83543acd..779039d4 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -70,7 +70,8 @@ * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. * @param {Number} [options.smoothTileEdgesMinZoom] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.opacity=1] - Opacity the tiled image should be drawn at. + * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. + * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. @@ -171,9 +172,13 @@ $.TiledImage = function( options ) { ajaxWithCredentials: $.DEFAULT_SETTINGS.ajaxWithCredentials, placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, opacity: $.DEFAULT_SETTINGS.opacity, + preload: $.DEFAULT_SETTINGS.preload, compositeOperation: $.DEFAULT_SETTINGS.compositeOperation }, options ); + this._preload = this.preload; + delete this.preload; + this._fullyLoaded = false; this._xSpring = new $.Spring({ @@ -301,7 +306,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag * Draws the TiledImage to its Drawer. */ draw: function() { - if (this.opacity !== 0) { + if (this.opacity !== 0 || this._preload) { this._midDraw = true; this._updateViewport(); this._midDraw = false; @@ -796,6 +801,21 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag }); }, + /** + * @returns {Boolean} whether the tiledImage can load its tiles even when it has zero opacity. + */ + getPreload: function() { + return this._preload; + }, + + /** + * Set true to load even when hidden. Set false to block loading when hidden. + */ + setPreload: function(preload) { + this._preload = !!preload; + this._needsDraw = true; + }, + /** * Get the rotation of this tiled image in degrees. * @param {Boolean} [current=false] True for current rotation, false for target. @@ -1785,7 +1805,7 @@ function compareTiles( previousBest, tile ) { * @param {OpenSeadragon.Tile[]} lastDrawn - An unordered list of Tiles drawn last frame. */ function drawTiles( tiledImage, lastDrawn ) { - if (lastDrawn.length === 0) { + if (tiledImage.opacity === 0 || lastDrawn.length === 0) { return; } var tile = lastDrawn[0]; diff --git a/src/viewer.js b/src/viewer.js index 99e3fa30..649456de 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1245,7 +1245,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to * (portions of the image outside of this area will not be visible). Only works on * browsers that support the HTML5 canvas. - * @param {Number} [options.opacity] Opacity the tiled image should be drawn at by default. + * @param {Number} [options.opacity=1] Proportional opacity of the tiled images (1=opaque, 0=hidden) + * @param {Boolean} [options.preload=false] Default switch for loading hidden images (true loads, false blocks) * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. * @param {String} [options.compositeOperation] How the image is composited onto other images. @@ -1292,6 +1293,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if (options.opacity === undefined) { options.opacity = this.opacity; } + if (options.preload === undefined) { + options.preload = this.preload; + } if (options.compositeOperation === undefined) { options.compositeOperation = this.compositeOperation; } @@ -1405,6 +1409,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, clip: queueItem.options.clip, placeholderFillStyle: queueItem.options.placeholderFillStyle, opacity: queueItem.options.opacity, + preload: queueItem.options.preload, degrees: queueItem.options.degrees, compositeOperation: queueItem.options.compositeOperation, springStiffness: _this.springStiffness,