Added "loading X..." text to thumbnails
This commit is contained in:
parent
56ac7adb1b
commit
317d9ff02b
3 changed files with 25 additions and 4 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -80,9 +80,9 @@ App.Presenters.UserListPresenter = function(
|
|||
user: user,
|
||||
formatRelativeTime: util.formatRelativeTime,
|
||||
}) + '</li>');
|
||||
util.loadImagesNicely($item.find('img'));
|
||||
$target.append($item);
|
||||
});
|
||||
_.map(_.map($target.find('img'), jQuery), util.loadImagesNicely);
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
@ -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('<div>Loading ' + $img.attr('alt') + '…</div>');
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue