From 8b4436f91a2889a3ebf6c87019496101f800508c Mon Sep 17 00:00:00 2001 From: Dmitry Semenov Date: Sat, 11 Jul 2015 16:32:30 +0300 Subject: [PATCH] set image resolution to maximum only when it is zoomed --- src/js/core.js | 44 ++++++++++++++++++++++++++++++-------- src/js/items-controller.js | 41 +++++++++++++++++++++-------------- 2 files changed, 60 insertions(+), 25 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 20d851ff9..bfdc47aac 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -99,6 +99,7 @@ var _isOpen, _currentWindowScrollY, _features, _windowVisibleSize = {}, + _renderMaxResolution = false, // Registers PhotoSWipe module (History, Controller ...) _registerModule = function(name, module) { @@ -144,21 +145,43 @@ var _isOpen, _bgOpacity = opacity; self.bg.style.opacity = opacity * _options.bgOpacity; }, - - _applyZoomTransform = function(styleObj,x,y,zoom) { + + _applyZoomTransform = function(styleObj,x,y,zoom,item) { + if(!_renderMaxResolution || (item && item !== self.currItem) ) { + zoom = zoom / (item ? item.fitRatio : self.currItem.fitRatio); + } + styleObj[_transformKey] = _translatePrefix + x + 'px, ' + y + 'px' + _translateSufix + ' scale(' + zoom + ')'; }, - _applyCurrentZoomPan = function() { + _applyCurrentZoomPan = function( allowRenderResolution ) { if(_currZoomElementStyle) { + + if(allowRenderResolution) { + if(_currZoomLevel > self.currItem.fitRatio) { + if(!_renderMaxResolution) { + _setImageSize(self.currItem, false, true); + _renderMaxResolution = true; + } + } else { + if(_renderMaxResolution) { + _setImageSize(self.currItem); + _renderMaxResolution = false; + } + } + } + + _applyZoomTransform(_currZoomElementStyle, _panOffset.x, _panOffset.y, _currZoomLevel); } }, _applyZoomPanToItem = function(item) { if(item.container) { + _applyZoomTransform(item.container.style, item.initialPosition.x, item.initialPosition.y, - item.initialZoomLevel); + item.initialZoomLevel, + item); } }, _setTranslateX = function(x, elStyle) { @@ -474,11 +497,11 @@ var publicMethods = { _currentWindowScrollY = _offset.y = y; _shout('updateScrollOffset', _offset); }, - applyZoomPan: function(zoomLevel,panX,panY) { + applyZoomPan: function(zoomLevel,panX,panY,allowRenderResolution) { _panOffset.x = panX; _panOffset.y = panY; _currZoomLevel = zoomLevel; - _applyCurrentZoomPan(); + _applyCurrentZoomPan( allowRenderResolution ); }, init: function() { @@ -799,6 +822,7 @@ var publicMethods = { self.currItem = _getItemAt( _currentItemIndex ); + _renderMaxResolution = false; _shout('beforeChange', _indexDiff); @@ -831,7 +855,8 @@ var publicMethods = { var prevItem = _getItemAt(_prevItemIndex); if(prevItem.initialZoomLevel !== _currZoomLevel) { _calculateItemSize(prevItem , _viewportSize ); - _applyZoomPanToItem( prevItem ); + _setImageSize(prevItem); + _applyZoomPanToItem( prevItem ); } } @@ -924,6 +949,7 @@ var publicMethods = { } if(item && item.container) { _calculateItemSize(item, _viewportSize); + _setImageSize(item); _applyZoomPanToItem( item ); } @@ -937,7 +963,7 @@ var publicMethods = { if(_currPanBounds) { _panOffset.x = _currPanBounds.center.x; _panOffset.y = _currPanBounds.center.y; - _applyCurrentZoomPan(); + _applyCurrentZoomPan( true ); } _shout('resize'); @@ -990,7 +1016,7 @@ var publicMethods = { updateFn(now); } - _applyCurrentZoomPan(); + _applyCurrentZoomPan( now === 1 ); }; if(speed) { diff --git a/src/js/items-controller.js b/src/js/items-controller.js index 06294fa22..f7b7c6c4b 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -185,7 +185,23 @@ var _getItemAt, } }, - _setImageSize = function(img, w, h) { + _setImageSize = function(item, img, maxRes) { + if(!item.src) { + return; + } + + if(!img) { + img = item.container.lastChild; + } + + var w = maxRes ? item.w : Math.round(item.w * item.fitRatio), + h = maxRes ? item.h : Math.round(item.h * item.fitRatio); + + if(item.placeholder && !item.loaded) { + item.placeholder.style.width = w + 'px'; + item.placeholder.style.height = h + 'px'; + } + img.style.width = w + 'px'; img.style.height = h + 'px'; }, @@ -197,7 +213,7 @@ var _getItemAt, for(var i = 0; i < _imagesToAppendPool.length; i++) { poolItem = _imagesToAppendPool[i]; if( poolItem.holder.index === poolItem.index ) { - _appendImage(poolItem.index, poolItem.item, poolItem.baseDiv, poolItem.img); + _appendImage(poolItem.index, poolItem.item, poolItem.baseDiv, poolItem.img, false, poolItem.clearPlaceholder); } } _imagesToAppendPool = []; @@ -352,6 +368,8 @@ _registerModule('Controller', { } _checkForError(item); + + _calculateItemSize(item, _viewportSize); if(item.src && !item.loadError && !item.loaded) { @@ -362,14 +380,6 @@ _registerModule('Controller', { return; } - // Apply hw-acceleration only after image is loaded. - // This is webkit progressive image loading bugfix. - // https://bugs.webkit.org/show_bug.cgi?id=108630 - // https://code.google.com/p/chromium/issues/detail?id=404547 - if(item.img) { - item.img.style.webkitBackfaceVisibility = 'hidden'; - } - // check if holder hasn't changed while image was loading if(holder && holder.index === index ) { if( _checkForError(item, true) ) { @@ -390,10 +400,11 @@ _registerModule('Controller', { baseDiv:baseDiv, img:item.img, index:index, - holder:holder + holder:holder, + clearPlaceholder:true }); } else { - _appendImage(index, item, baseDiv, item.img, _mainScrollAnimating || _initialZoomRunning); + _appendImage(index, item, baseDiv, item.img, _mainScrollAnimating || _initialZoomRunning, true); } } else { // remove preloader & mini-img @@ -420,7 +431,7 @@ _registerModule('Controller', { placeholder.src = item.msrc; } - _setImageSize(placeholder, item.w, item.h); + _setImageSize(item, placeholder); baseDiv.appendChild(placeholder); item.placeholder = placeholder; @@ -453,14 +464,12 @@ _registerModule('Controller', { } else if(item.src && !item.loadError) { // image object is created every time, due to bugs of image loading & delay when switching images img = framework.createEl('pswp__img', 'img'); - img.style.webkitBackfaceVisibility = 'hidden'; img.style.opacity = 1; img.src = item.src; - _setImageSize(img, item.w, item.h); + _setImageSize(item, img); _appendImage(index, item, baseDiv, img, true); } - _calculateItemSize(item, _viewportSize); if(!_initialContentSet && index === _currentItemIndex) { _currZoomElementStyle = baseDiv.style;