[ BootStrap ] check that all images have been loaded
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
[ BootStrap ] check that all images have been loaded
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)
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
Re: [ BootStrap ] check that all images have been loaded
I would like to create a loading screen, and just close until the images being loaded by the bootstrap are all loaded
Re: [ BootStrap ] check that all images have been loaded
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()
! }
! }
Re: [ BootStrap ] check that all images have been loaded
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
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
Re: [ BootStrap ] check that all images have been 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.
If I understood skinkairewalker correctly, the images are loaded/displayed directly with BootStrap.
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
Re: [ BootStrap ] check that all images have been loaded
thanks you PeterPeter 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() ! } ! }
but now there is a doubt, and if an image doesn't load, will it be in an eternal loop?
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
Re: [ BootStrap ] check that all images have been loaded
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