diff --git a/src/js/poster-image.js b/src/js/poster-image.js index ea0e02ee46..d70c7992c6 100644 --- a/src/js/poster-image.js +++ b/src/js/poster-image.js @@ -27,6 +27,10 @@ class PosterImage extends ClickableComponent { constructor(player, options) { super(player, options); + const { mainContent } = (options && options.playerOptions) || {}; + + this.isMainContent = mainContent; + this.update(); this.update_ = (e) => this.update(e); @@ -138,7 +142,8 @@ class PosterImage extends ClickableComponent { }, {}, Dom.createEl('img', { - loading: 'lazy', + loading: this.isMainContent ? 'eager' : 'lazy', + fetchPriority: this.isMainContent ? 'high' : 'auto', crossOrigin: this.crossOrigin() }, { alt: '' diff --git a/test/unit/poster.test.js b/test/unit/poster.test.js index ff81124214..6f40d262b5 100644 --- a/test/unit/poster.test.js +++ b/test/unit/poster.test.js @@ -31,6 +31,15 @@ QUnit.test('should create and update a poster image', function(assert) { posterImage.dispose(); }); +QUnit.test('should mark img as prioritized request when mainContent is true', function(assert) { + const posterImage = new PosterImage(this.mockPlayer, { playerOptions: { mainContent: true } }); + + assert.equal(posterImage.$('img').loading, 'eager', 'img is loading eager'); + assert.equal(posterImage.$('img').fetchPriority, 'high', 'img has fetchpriority high'); + + posterImage.dispose(); +}); + QUnit.test('should mirror crossOrigin', function(assert) { assert.strictEqual(this.mockPlayer.posterImage.$('img').crossOrigin, null, 'crossOrigin not set when not present in options'); assert.strictEqual(this.mockPlayer.posterImage.crossOrigin(), null, 'crossOrigin not set from getter when not present in options');