diff --git a/public_html/css/post-list.css b/public_html/css/post-list.css index 50f1adaa..82de7aed 100644 --- a/public_html/css/post-list.css +++ b/public_html/css/post-list.css @@ -55,6 +55,7 @@ background: white; } + .post-small a:focus, .post-small a:hover { background: #64C2ED; @@ -63,8 +64,8 @@ outline: 0; } -.post-small a:focus img, -.post-small a:hover img { +.post-small a:focus img:not(.loading), +.post-small a:hover img:not(.loading) { opacity: .8 !important; } diff --git a/public_html/js/Presenters/UserListPresenter.js b/public_html/js/Presenters/UserListPresenter.js index 7ee8d869..98f94fcd 100644 --- a/public_html/js/Presenters/UserListPresenter.js +++ b/public_html/js/Presenters/UserListPresenter.js @@ -80,9 +80,9 @@ App.Presenters.UserListPresenter = function( user: user, formatRelativeTime: util.formatRelativeTime, }) + ''); - util.loadImagesNicely($item.find('img')); $target.append($item); }); + _.map(_.map($target.find('img'), jQuery), util.loadImagesNicely); } return { diff --git a/public_html/js/Util.js b/public_html/js/Util.js index ccdf1f77..983ea63c 100644 --- a/public_html/js/Util.js +++ b/public_html/js/Util.js @@ -26,9 +26,29 @@ App.Util = function(_, jQuery, marked, promise) { function loadImagesNicely($img) { if (!$img.get(0).complete) { - $img.css('opacity', '0'); + $img.addClass('loading'); + $img.css({opacity: 0}); + var $div = jQuery('
Loading ' + $img.attr('alt') + '…
'); + var width = $img.width(); + var height = $img.height(); + if (width > 50 && height > 50) { + $div.css({ + position: 'absolute', + width: width + 'px', + height: height + 'px', + color: 'rgba(0, 0, 0, 0.15)', + zIndex: -1, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + textAlign: 'center'}); + $div.insertBefore($img); + $div.offset($img.offset()); + } $img.bind('load', function() { $img.animate({opacity: 1}, 'fast'); + $img.removeClass('loading'); + $div.fadeOut($div.remove); }); } }