1

問題: 最後の .js ファイルがダウンロードされるまで、Jquery Slider が Web ページに表示されない

質問: 外部の .js がまだロードされている間に Jquery Slider を表示する方法 (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>
4

2 に答える 2

0

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-28T16:52:11.143 に答える
0

他の js ファイルを非同期でロードしてみてください。 http://www.webmaster-source.com/2010/06/07/loading-javascript-asynchronously/

于 2013-02-28T16:33:04.647 に答える