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 = $( '<img>' ).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 = $( '<img>' ).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 0000000..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 <scheno...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to