Gergő Tisza has uploaded a new change for review. https://gerrit.wikimedia.org/r/111428
Change subject: WIP preload images ...................................................................... WIP preload images Preloading works, but something goes wrong with the resizing. Anyway, the code sucks. This can probably made cleaner after merging multilightbox and mmv, and transforming LighboxImage into a model with no dependencies which can be loaded by a service. Change-Id: Idcb5c40de1ac0b3e482decd66e56c4de8ec71b6b Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/155 --- M resources/mmv/mmv.js 1 file changed, 81 insertions(+), 5 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/28/111428/1 diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index 8afd2f7..c158568 100755 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -101,6 +101,12 @@ this.api = new mw.Api(); /** + * @property {mw.mmv.provider.Image} + * @private + */ + this.imageProvider = new mw.mmv.provider.Image(); + + /** * @property {mw.mmv.provider.ImageInfo} * @private */ @@ -624,10 +630,6 @@ viewer = this, image = new Image(); - image.onload = function () { - viewer.profileEnd( rpid ); - }; - rpid = this.profileStart( profileEvent, { width: imageData.width, height: imageData.height, @@ -636,7 +638,10 @@ // Use cached image if we have it. maybeThumb = imageData.getThumbUrl( requestedWidth ); - image.src = maybeThumb || imageData.url; + this.imageProvider.get( maybeThumb || imageData.url ).then( function() { + image.src = maybeThumb || imageData.url; + viewer.profileEnd( rpid ); + } ); if ( maybeThumb && requestedWidth > targetWidth || !maybeThumb && imageData.width > targetWidth ) { @@ -678,6 +683,8 @@ this.lightbox.iface.load( image ); } + this.preloadImages(); + $( document.body ).addClass( 'mw-mlb-lightbox-open' ); mdpid = this.profileStart( 'metadata-fetch' ); @@ -705,6 +712,75 @@ }; /** + * Requests the data required for loading an image. Also preloads the image itself. + * @param {mw.LightboxImage} lightboxImage + * @return {jQuery.Promise<mw.mmv.model.Image, mw.mmv.model.Thumbnail, HTMLImageElement>} + */ + MMVP.loadLightboxImage = function( lightboxImage ) { + var viewer = this, + thumbnailWidth; + + thumbnailWidth = this.getThumbnailWidth( + this.ui.$imageWrapper.width(), + this.ui.$imageWrapper.height(), + lightboxImage.thumbnail.width, + lightboxImage.thumbnail.height + ); + return this.fetchImageInfoRepoInfoAndFileUsageInfo( + lightboxImage.filePageTitle, thumbnailWidth.real + ).then( function( imageInfo, repoInfoHash, thumbnail, imageUsage, globalUsage ) { + return viewer.imageProvider.get( thumbnail.url ).then( function( image ) { + return $.Deferred().resolve( imageInfo, thumbnail, image ); + } ); + } ); + }; + + /** + * Preload this many prev/next images to speed up navigation. + * (E.g. preloadDistance = 3 means that the previous 3 and the next 3 images will be loaded.) + * Preloading only happens when the viewer is open. + * @property {number} + */ + MMVP.preloadDistance = 1; + + MMVP.preloadCache = {}; + + MMVP.preloadImages = function() { + var viewer = this, + index = this.lightbox.currentIndex; + + // JSHint doesn't like this inside the loop + function makeLightboxLoader( position ) { + return function() { + return viewer.loadLightboxImage( viewer.lightbox.images[position] ); + }; + } + + $.each( [1, -1], function( _, step ) { + var i, + pos, + previousDeferred; + for ( i = 0; i <= viewer.preloadDistance; i += step, pos = index + i ) { + if ( pos >= viewer.lightbox.images.length || pos < 0 ) { + return; + } + if ( viewer.preloadCache[pos + i] ) { + return; + } + + // make sure closer images load first + if ( previousDeferred ) { + viewer.preloadCache[i] = previousDeferred.then( makeLightboxLoader( index + i ) ); + } else { + viewer.preloadCache[i] = makeLightboxLoader( index + i )(); + } + + previousDeferred = viewer.preloadCache[i]; + } + } ); + }; + + /** * @method * Animates the metadata area when the viewer is first opened. * @return {jQuery.Promise} an empty promise which resolves when the animation is finished -- To view, visit https://gerrit.wikimedia.org/r/111428 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Idcb5c40de1ac0b3e482decd66e56c4de8ec71b6b Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
