ImageGateway is currently setup to cache all responses:
ImageGateway.prototype.getThumb = function ( title ) { var cachedThumb = this._cache[title], $window = util.getWindow(), imageSizeMultiplier = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) ? window.devicePixelRatio : 1; if ( !cachedThumb ) { this._cache[title] = this.api.get( actionParams( { prop: 'imageinfo', titles: title, iiprop: [ 'url', 'extmetadata' ], // request an image devicePixelRatio times bigger than the reported screen size // for retina displays and zooming iiurlwidth: findSizeBucket( $window.width() * imageSizeMultiplier ), iiurlheight: findSizeBucket( $window.height() * imageSizeMultiplier ) } ) ).then( function ( resp ) { // imageinfo is undefined for missing pages. if ( resp.query && resp.query.pages && resp.query.pages[0] && resp.query.pages[0].imageinfo ) { return resp.query.pages[0].imageinfo[0]; } throw new Error( 'The API failed to return any pages matching the titles.' ); } ); } return this._cache[title]; };
However, the cache from ImageGateway is not being used and hasn't been used in a long time. On each onSlide event, ImageCarousel makes a new instance of itself and makes a new instance of ImageGateway which bypasses any benefits of the caching code.
This ticket is about utilizing cache and making it production ready. In its current state, the code will cache all responses including failed responses! We should only cache successful responses though. Instead of building our own cache, we should utilize the API:Caching data feature of MediaWiki API and expect browsers to cache the API response. This will not only fix the caching, but also keep the cache on different pageviews.
Acceptance criteria
- The cache logic in ImageGateway is removed
- ImageGateway uses the Mediawiki API Cache