[ BootStrap ] check that all images have been loaded

Just starting out? Need help? Post your questions and find answers here.
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

[ BootStrap ] check that all images have been loaded

Post by skinkairewalker »

Hello, I have the following problem: I am having trouble creating a loading spinner for images that I am displaying using bootstrap ... (the image links are provided by an external API)
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: [ BootStrap ] check that all images have been loaded

Post by Peter »

tell us more.
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

Re: [ BootStrap ] check that all images have been loaded

Post by skinkairewalker »

I would like to create a loading screen, and just close until the images being loaded by the bootstrap are all loaded
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: [ BootStrap ] check that all images have been loaded

Post by Peter »

something like this...

Code: Select all

Procedure BlockUI(Message.s)
  ! $.blockUI({ message: v_message });
EndProcedure

Procedure UnblockUI()
  ! $.unblockUI();
EndProcedure


BlockUI("<h1>Please wait until all images have been loaded.....</h1>")

; load some demo-images:
For Counter = 0 To 20
  ! $("body").append($("<img src='https://cataas.com/cat?width=200&rnd=" + v_counter + new Date().getTime() + "' />"));
Next


! var imgs = document.images;
! var len = imgs.length;
! var counter = 0;
! 
! [].forEach.call( imgs, function( img ) {
!   if(img.complete) {
!     incrementCounter();
!   } else {
!     img.addEventListener( 'load', incrementCounter, false );
!   }
! });
! 
! function incrementCounter() {
!     counter++;
!     if ( counter === len ) {
Debug "All images loaded!"
UnblockUI()
!     }
! }
plouf
Posts: 194
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: [ BootStrap ] check that all images have been loaded

Post by plouf »

you can also do it with SB internal functions

bindevent supports #PB_Event_Loading , with a special way described in manual
so it will inform you when every specific image/sound is loaded
Christos
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: [ BootStrap ] check that all images have been loaded

Post by Peter »

But BindEvent(#PB_Event_Loading) applies only to the images loaded via LoadImage().

If I understood skinkairewalker correctly, the images are loaded/displayed directly with BootStrap.
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

Re: [ BootStrap ] check that all images have been loaded

Post by skinkairewalker »

Peter wrote:something like this...

Code: Select all

Procedure BlockUI(Message.s)
  ! $.blockUI({ message: v_message });
EndProcedure

Procedure UnblockUI()
  ! $.unblockUI();
EndProcedure


BlockUI("<h1>Please wait until all images have been loaded.....</h1>")

; load some demo-images:
For Counter = 0 To 20
  ! $("body").append($("<img src='https://cataas.com/cat?width=200&rnd=" + v_counter + new Date().getTime() + "' />"));
Next


! var imgs = document.images;
! var len = imgs.length;
! var counter = 0;
! 
! [].forEach.call( imgs, function( img ) {
!   if(img.complete) {
!     incrementCounter();
!   } else {
!     img.addEventListener( 'load', incrementCounter, false );
!   }
! });
! 
! function incrementCounter() {
!     counter++;
!     if ( counter === len ) {
Debug "All images loaded!"
UnblockUI()
!     }
! }
thanks you Peter

but now there is a doubt, and if an image doesn't load, will it be in an eternal loop?
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

Re: [ BootStrap ] check that all images have been loaded

Post by skinkairewalker »

Peter wrote:But BindEvent(#PB_Event_Loading) applies only to the images loaded via LoadImage().

If I understood skinkairewalker correctly, the images are loaded/displayed directly with BootStrap.

exactly :)

thank you for your attention Peter and plouf
Post Reply