jquery - Javascript: Play Preloading Screen until specific things are loaded -

-

a little background.
currently, have preloading screen shows before page loaded set time. want able detect whether several elements loaded , ending preloading screen rather having set time preloading screen end.

in fiddle, detect if images have been rendered , loaded , ending screen , understand , know how other element such random div or paragraph if possible.

fiddle: https://jsfiddle.net/jzhang172/lyv17l0n/1/

$(document).ready(function() {         settimeout(function(){          $('body').addclass('loaded');          $('h1').css('color','#222222');      }, 500);     });
.loaded{  transition:1s;  }      .content{    background:gray;    height:500px;    width:100%;      }    #loader-wrapper{    position:fixed;    background:black;    top:0;    bottom:0;    left:0;    right:0;    transition:1s;      }  .loaded #loader-wrapper{    opacity:0;  }  .loader-section{    position:fixed;    top:0;    bottom:0;    background:red;    z-index:5;    width:51%;    transition:1s;      opacity:1;      }  .section-left{    left:0;  }  .section-right{    right:0;  }      .loaded .loader-section.section-left{    opacity:0;    transform:translatex(-100%);    transition:1s;  }  .loaded .loader-section.section-right{      opacity:0;    transform:translatex(100%);    transition:1s;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <body>        <div id="loader-wrapper">  <div id="loader"></div>  <div class="loader-section section-left"></div>  <div class="loader-section section-right"></div>      </div>    <div class="content">      <img src="https://upload.wikimedia.org/wikipedia/en/2/22/kirby_wii.png">       <img src="https://upload.wikimedia.org/wikipedia/en/2/22/kirby_wii.png">        <img src="https://upload.wikimedia.org/wikipedia/en/2/22/kirby_wii.png">         <img src="https://upload.wikimedia.org/wikipedia/en/2/22/kirby_wii.png">             </div>      </body>

you can use plugin: https://rawgit.com/alexanderdickson/waitforimages/master/dist/jquery.waitforimages.js

$('body').waitforimages(  function() {     ...code each load... }, function(loaded, total) {     if(loaded / total == 1){        ...code load...     } });

you can modify plugin divs , txt. images ones takes time load.

you can check plugin working:

http://jsfiddle.net/2sc0rtzl/


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more