To add this effect, first to understand the page loading and event execution order, see this simple example:
1 <HTMLxmlns= "http://www.w3.org/1999/xhtml">2 <Head>3 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />4 <title>Verifying the load Order</title>5 <Scriptsrc=".. /scripts/jquery-1.7.1.js "></Script>6 <Linkhref=".. /scripts/mobile/jquery.mobile-1.4.0.min.css "rel= "stylesheet" />7 <Scriptsrc=".. /scripts/mobile/jquery.mobile-1.4.0.min.js "></Script>8 <Script>9 Alert ("Dom hasn't been loaded yet ."); Ten window.onload= function () { One Alert ('onload, the picture is finished loading'); A } - $ (document). Ready (function () { - Alert ('Ready,dom finished loading'); the }) - </Script> - </Head> - <Body> + <formID= "Form1"runat= "Server"> - <imgsrc= "Http://images.aviary.com/imagesv5/feather_default.jpg" /> + <imgsrc= "Http://car0.autoimg.cn/car/upload/2015/1/8/v_20150108092921264345010.jpg" /> A </form> at </Body> - </HTML>
Execution Result: 9 rows >14 row >11 row, 9 lines of code placement of the upper and lower positions, the result is still the same. After understanding the above sequence, if you want the page to display the jquery mobile loader before loading, and then when the page data request is finished, and then after the multimedia loading, and then close the loader, you can follow the following ideas to solve:
1 <HTMLxmlns= "http://www.w3.org/1999/xhtml">2 <Head>3 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />4 <title>Verifying the load Order</title>5 <Scriptsrc=".. /scripts/jquery-1.7.1.js "></Script>6 <Linkhref=".. /scripts/mobile/jquery.mobile-1.4.0.min.css "rel= "stylesheet" />7 <Scriptsrc=".. /scripts/mobile/jquery.mobile-1.4.0.min.js "></Script>8 <Script>9 SetTimeout ('Showloader ()', -);//There's a delay here. Direct call Unable to display loaderTen //display loader. For jQuery Mobile 1.2.0 One functionShowloader () { A $.mobile.loading ('Show', { - Text:'Landing ...', //text displayed in the loader - textvisible:true, //whether to display text the Theme:'a', //Loader theme Style A-e - textonly:false, //whether to display text only - HTML:"" //HTML content to display, slices, etc. - }); + } - //hides the loader. For jQuery Mobile 1.2.0 + functionHideloader () { A $.mobile.loading ('Hide'); at } - window.onload= function () { - Hideloader (); - //setTimeout (' Hideloader () ', 5000);//delay of 5 seconds, analog pictures and multimedia loading time-consuming - } - $ (document). Ready (function () { in //setTimeout (' Hideloader () ', 5000);//delay of 5 seconds, analog page request data time consuming, Ajax asynchronous request and so on here - }) to </Script> + </Head> - <Body> the <formID= "Form1"runat= "Server"> * <imgsrc= "Http://images.aviary.com/imagesv5/feather_default.jpg" /> $ <imgsrc= "Http://car0.autoimg.cn/car/upload/2015/1/8/v_20150108092921264345010.jpg" />Panax Notoginseng </form> - </Body> the </HTML>
Description
1) 9 lines of code to be slightly deferred execution, or it is possible that the above referenced JS file has not been loaded, this time call Showloader method, is not executed correctly, cannot display the loader
2) The close loader can be placed in the Document.ready or window.onload, depending on the implementation of the page needs.
3) If the network speed is fast enough and two images are loaded instantly, it is possible to see no obvious loader display and shutdown process.
jquery mobile adds loading effects document.ready and window.onload execution order comparison in page load
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
