aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2020-05-18 07:28:25 +0000
committerMario <mario@mariovavti.com>2020-05-18 07:28:25 +0000
commitddc544e00a78f7837599f187a564cc6871354d81 (patch)
tree149971146b6673fc2ecf124773009cf3e5ad7776
parent97d5ffe056a70f9ed3e67d98b3c73b1cb41ebb1c (diff)
downloadvolse-hubzilla-ddc544e00a78f7837599f187a564cc6871354d81.tar.gz
volse-hubzilla-ddc544e00a78f7837599f187a564cc6871354d81.tar.bz2
volse-hubzilla-ddc544e00a78f7837599f187a564cc6871354d81.zip
add images load status to spinnner if preload images is enabled
-rw-r--r--view/js/main.js73
-rwxr-xr-xview/tpl/conv_frame.tpl1
2 files changed, 45 insertions, 29 deletions
diff --git a/view/js/main.js b/view/js/main.js
index c172b9365..6d084fdd2 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -749,10 +749,6 @@ function updateConvItems(mode,data) {
else
sse_bs_init();
- // reset rotators and cursors we may have set before reaching this place
-
- $('.like-rotator').hide();
-
if(commentBusy) {
commentBusy = false;
$('body').css('cursor', 'auto');
@@ -779,30 +775,39 @@ function updateConvItems(mode,data) {
mediaPlaying = false;
});
- var bimgs = $(".wall-item-body img, .wall-photo-item img").not(function() { return this.complete; });
- var bimgcount = bimgs.length;
-
- if (bimgcount) {
- bimgs.on('load',function() {
- bimgcount--;
- if (! bimgcount) {
- collapseHeight();
-
- if(bParam_mid && mode === 'replace')
- scrollToItem();
-
- $(document.body).trigger("sticky_kit:recalc");
- }
+ if(! preloadImages) {
+ $('.wall-item-body, .wall-photo-item').imagesLoaded()
+ .always( function( instance ) {
+ //console.log('all images loaded');
+ collapseHeight();
+
+ if(bParam_mid && mode === 'replace')
+ scrollToItem();
+
+ })
+ .done( function( instance ) {
+ //console.log('all images successfully loaded');
+ })
+ .fail( function() {
+ //console.log('all images loaded, at least one is broken');
+ })
+ .progress( function( instance, image ) {
+ var result = image.isLoaded ? 'loaded' : 'broken';
+ //console.log( 'image is ' + result + ' for ' + image.img.src );
});
- } else {
+ }
+ else {
collapseHeight();
if(bParam_mid && mode === 'replace')
scrollToItem();
-
- $(document.body).trigger("sticky_kit:recalc");
}
+ // reset rotators and cursors we may have set before reaching this place
+ $('.like-rotator').hide();
+ $("#page-spinner").hide();
+ $("#profile-jot-text-loading").hide();
+
followUpPageLoad = true;
}
@@ -999,16 +1004,16 @@ function liveUpdate(notify_id) {
if(update_mode === 'update' || preloadImages) {
console.log('LOADING images...');
+ $('.wall-item-body, .wall-photo-item',data).imagesLoaded()
+ .always( function( instance ) {
+ //console.log('all images loaded');
- $('.wall-item-body, .wall-photo-item',data).imagesLoaded( function() {
var iready = new Date();
- console.log('IMAGES ready in: ' + (iready - dready)/1000 + ' seconds.');
+ //console.log('IMAGES ready in: ' + (iready - dready)/1000 + ' seconds.');
page_load = false;
scroll_next = false;
updateConvItems(update_mode,data);
- $("#page-spinner").hide();
- $("#profile-jot-text-loading").hide();
// adjust scroll position if new content was added above viewport
if(update_mode === 'update' && !justifiedGalleryActive) {
@@ -1016,16 +1021,26 @@ function liveUpdate(notify_id) {
}
in_progress = false;
-
+ $('#image_counter').html('');
+
+ })
+ .done( function( instance ) {
+ //console.log('all images successfully loaded');
+ })
+ .fail( function() {
+ //console.log('all images loaded, at least one is broken');
+ })
+ .progress( function( instance, image ) {
+ $('#image_counter').html(instance.progressedCount + '/' + instance.images.length);
+ //var result = image.isLoaded ? 'loaded' : 'broken';
+ //console.log( 'image is ' + result + ' for ' + image.img.src );
});
+
}
else {
page_load = false;
scroll_next = false;
updateConvItems(update_mode,data);
- $("#page-spinner").hide();
- $("#profile-jot-text-loading").hide();
-
in_progress = false;
}
diff --git a/view/tpl/conv_frame.tpl b/view/tpl/conv_frame.tpl
index c6b3b0d9b..be74dea39 100755
--- a/view/tpl/conv_frame.tpl
+++ b/view/tpl/conv_frame.tpl
@@ -3,6 +3,7 @@
<div id="conversation-end"></div>
<div id="page-spinner" class="spinner-wrapper">
<div class="spinner m"></div>
+ <div id="image_counter" class="text-muted text-center small"></div>
</div>
<div class="modal" id="conversation_settings" tabindex="-1" role="dialog" aria-labelledby="conversation_settings_label" aria-hidden="true">
<div class="modal-dialog">