[MediaWiki-commits] [Gerrit] mediawiki...Hovergallery[master]: Add loading icon
Sophivorus has submitted this change and it was merged.
Change subject: Add loading icon
..
Add loading icon
When a user hover over an image, now a loading icon is show while
the full image loads.
Change-Id: I5432a768fb978ddd9105c6b47a1c2a2d2c359628
---
M HoverGallery.css
M HoverGallery.js
A images/loading.gif
3 files changed, 15 insertions(+), 7 deletions(-)
Approvals:
Sophivorus: Verified; Looks good to me, approved
diff --git a/HoverGallery.css b/HoverGallery.css
index 002203a..1429040 100644
--- a/HoverGallery.css
+++ b/HoverGallery.css
@@ -1,4 +1,6 @@
.hoverimage {
+ background: white;
+ padding: 1em;
pointer-events: none;
position: fixed;
top: 50%;
diff --git a/HoverGallery.js b/HoverGallery.js
index 421ac93..58892cd 100644
--- a/HoverGallery.js
+++ b/HoverGallery.js
@@ -9,6 +9,11 @@
},
onMouseEnter: function () {
+ // First show the loading icon
+ var loadingUrl = mw.config.get( 'wgExtensionAssetsPath' ) +
'/hovergallery/images/loading.gif',
+ loadingImg = $( '' ).addClass( 'hoverimage'
).attr( 'src', loadingUrl );
+ $( 'body' ).append( loadingImg );
+
var gallery = $( this ).closest( '.gallery' ),
fileUrls = gallery.data( 'hovergallery-fileurls' ),
maxHoverWidth = gallery.data(
'hovergallery-maxhoverwidth' ),
@@ -20,13 +25,14 @@
// Get the corresponding URL and build the image
var url = fileUrls[ thumbIndex ],
- image = $( '' ).attr( 'src', url ).addClass(
'hoverimage' ).css({
- 'max-width': maxHoverWidth + 'px',
- 'max-height': maxHoverHeight + 'px'
- });
-
- // Show the image
- $( 'body' ).append( image );
+ image = new Image();
+ image.src = url;
+ image.onload = function () {
+ loadingImg.css({
+ 'max-width': maxHoverWidth + 'px',
+ 'max-height': maxHoverHeight + 'px'
+ }).attr( 'src', url );
+ };
},
onMouseLeave: function () {
diff --git a/images/loading.gif b/images/loading.gif
new file mode 100644
index 000..490e8f0
--- /dev/null
+++ b/images/loading.gif
Binary files differ
--
To view, visit https://gerrit.wikimedia.org/r/311335
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5432a768fb978ddd9105c6b47a1c2a2d2c359628
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Hovergallery
Gerrit-Branch: master
Gerrit-Owner: Sophivorus
Gerrit-Reviewer: Sophivorus
Gerrit-Reviewer: jenkins-bot <>
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
[MediaWiki-commits] [Gerrit] mediawiki...Hovergallery[master]: Add loading icon
Sophivorus has uploaded a new change for review.
https://gerrit.wikimedia.org/r/311335
Change subject: Add loading icon
..
Add loading icon
When a user hover over an image, now a loading icon is show while
the full image loads.
Change-Id: I5432a768fb978ddd9105c6b47a1c2a2d2c359628
---
M HoverGallery.css
M HoverGallery.js
A images/loading.gif
3 files changed, 15 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Hovergallery
refs/changes/35/311335/1
diff --git a/HoverGallery.css b/HoverGallery.css
index 002203a..1429040 100644
--- a/HoverGallery.css
+++ b/HoverGallery.css
@@ -1,4 +1,6 @@
.hoverimage {
+ background: white;
+ padding: 1em;
pointer-events: none;
position: fixed;
top: 50%;
diff --git a/HoverGallery.js b/HoverGallery.js
index 421ac93..58892cd 100644
--- a/HoverGallery.js
+++ b/HoverGallery.js
@@ -9,6 +9,11 @@
},
onMouseEnter: function () {
+ // First show the loading icon
+ var loadingUrl = mw.config.get( 'wgExtensionAssetsPath' ) +
'/hovergallery/images/loading.gif',
+ loadingImg = $( '' ).addClass( 'hoverimage'
).attr( 'src', loadingUrl );
+ $( 'body' ).append( loadingImg );
+
var gallery = $( this ).closest( '.gallery' ),
fileUrls = gallery.data( 'hovergallery-fileurls' ),
maxHoverWidth = gallery.data(
'hovergallery-maxhoverwidth' ),
@@ -20,13 +25,14 @@
// Get the corresponding URL and build the image
var url = fileUrls[ thumbIndex ],
- image = $( '' ).attr( 'src', url ).addClass(
'hoverimage' ).css({
- 'max-width': maxHoverWidth + 'px',
- 'max-height': maxHoverHeight + 'px'
- });
-
- // Show the image
- $( 'body' ).append( image );
+ image = new Image();
+ image.src = url;
+ image.onload = function () {
+ loadingImg.css({
+ 'max-width': maxHoverWidth + 'px',
+ 'max-height': maxHoverHeight + 'px'
+ }).attr( 'src', url );
+ };
},
onMouseLeave: function () {
diff --git a/images/loading.gif b/images/loading.gif
new file mode 100644
index 000..490e8f0
--- /dev/null
+++ b/images/loading.gif
Binary files differ
--
To view, visit https://gerrit.wikimedia.org/r/311335
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5432a768fb978ddd9105c6b47a1c2a2d2c359628
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Hovergallery
Gerrit-Branch: master
Gerrit-Owner: Sophivorus
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
