SpiderBasic

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)

tell us more.

I would like to create a loading screen, and just close until the images being loaded by the bootstrap are all loaded

something like this...

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

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.

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?

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