jquery - Wait For Div To Be Shown Before Loading Script -
i trying make once picture has faded out replaced script.js file. have following code:
<!doctype html> <html> <head> <title>timothy lampen</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="styles.css"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <body> <script> $(document).ready(function() { $(".circle") .delay(3000) .fadeout(1000, function () { $(this) .addclass("content") .removeclass("circle") .empty() .append($("<script/>", { src: "script.js", type: "text/javascript" })); }); }); </script> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">academics</a></li> <li><a href="#">sports</a></li> <li><a href="#">html</a></li> <li><a href="#">java</a></li> </ul> </div> </div> </nav> <div id="mycarousel" class="carousel slide carousel-spacing" data-ride="carousel"> <div class="carousel-indicators"> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> <li data-target="#mycarousel" data-slide-to="3"></li> </ol> </div> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="desert.jpg" alt="pic1"> </div> <div class="item"> <img src="desert.jpg" alt="pic2"> </div> <div class="item"> <img src="desert.jpg" alt="pic3"> </div> <div class="item"> <img src="desert.jpg" alt="pic4"> </div> </div> <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> <div class="circle"> <div id="graph"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>but happening: https://gyazo.com/227b212e9822fbf492999d3c6a82909a
as can see picture loading, not being replaced script.js file.
so how able delay loading of script.js file loads after class of div has been switched 'content'
thanks, tim
first of all: put script tags inside body.
second: remove script tag script.js source, if want delay load.
try after:
$(document).ready(function() { $(".circle") .delay(3000) .fadeout(1000, function () { $(this) .addclass("content") .removeclass("circle") .empty() .append($("<script/>", { src: "script.js", type: "text/javascript" })); }); }); }); 
Comments
Post a Comment