显示JQuery的滑块，而页面仍在加载

问题：jQuery的滑块不能在网页上显示，直到最后的.js文件下载显示JQuery的滑块，而页面仍在加载

问：如何显示jQuery的滑块，而外部的.js仍然加载（有完成了Jquery下载，并下载其他第三方插件和模块）。

场景：

<html> 
<head> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> 

<script type="text/javascript"> 
$(document).ready(function() { 

// Product Price Slider 
$(function() { 
    $("#fproductprice #slider-range").slider({ 
     range: true, 
     logarithmic: true, 
     min: 1, 
     max: 100 , 
     animated: true, 
     values: [1, 100], 
     slide: function(event, ui) { 
      $("#fppricefrom").val(ui.values[0]); 
      $("#fppriceto").val(ui.values[1]); 
     } 
    }); 
    $("#fppricefrom").val($("#fproductprice #slider-range").slider("values",0)); 
    $("#fppriceto").val($("#fproductprice #slider-range").slider("values",1)); 
}); 

}); 
</script> 

</head> 

<body> 

<!-- Product Price --> 
<div id="fproductprice"> 
    Price: 
    <div id="slider-range"></div> 
    <br /> 
    <input type="text" id="fppricefrom" size="8"/> 
    <input type="text" id="fppriceto" size="8"/> 
</div> 

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> 
</body> 
</html>

来源

2013-02-28 Abhishek Madhani

尝试异步加载你的其他js文件。 http://www.webmaster-source.com/2010/06/07/loading-javascript-asynchronously/

来源

2013-02-28 16:33:04

嗨还没有申请它，忙于其他重要问题。今晚将检查它，并让你知道，如果这有效。 – 2013-03-21 10:09:41

尝试通过jQuery的getScript加入加载JS文件$.getScript

$(function() { 
$("#fproductprice #slider-range").slider({ 
    range: true, 
    logarithmic: true, 
    min: 1, 
    max: 100 , 
    animated: true, 
    values: [1, 100], 
    slide: function(event, ui) { 
     $("#fppricefrom").val(ui.values[0]); 
     $("#fppriceto").val(ui.values[1]); 
    } 
}); 
$("#fppricefrom").val($("#fproductprice #slider-range").slider("values",0)); 
$("#fppriceto").val($("#fproductprice #slider-range").slider("values",1)); 

$.getScript('//assets.pinterest.com/js/pinit.js', function() { });

}）;

请参阅http://api.jquery.com/jQuery.getScript/

来源

2013-02-28 16:52:11 Mahesh

将在今晚检查它，并让你知道这是否有效 – 2013-03-21 10:09:18

显示JQuery的滑块，而页面仍在加载

回答

相关问题