0

次の提案を使用してスピナーを開発しました。

http://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/

スピナーは、何もせずに、非表示にせずにそのまま実行すると機能します。

しかし、スピナーをコードのブックエンドとして関数に埋め込んでいます。最初に示し、最後に終了します。しかし、遅延が1秒を超えるほど十分なデータをロードしても、表示されません。

コードは次のとおりです。

    function SortListByDistance(SortReferenceLatitude, SortReferenceLongitude)
    {
        $("#SpinnerControl").show();

        $(".RetailerSearchSectionLine").each(function()
        {
            var SortLocationLatitude = $(".RetailLocationLatitude", $(this)).text();
            var SortLocationLongitude = $(".RetailLocationLongitude", $(this)).text();
            var DistanceFromReferenceLocation = CalculateDistance(SortReferenceLatitude, SortReferenceLongitude, SortLocationLatitude, SortLocationLongitude);
            $(this).data("DistanceFromReferenceLocation", DistanceFromReferenceLocation);
        });

        var TransferArray = $("#RetailerSearchSectionBody ul li").toArray().sort(function(a, b)
        {
            var distance1 = $(a).data("DistanceFromReferenceLocation");
            var distance2 = $(b).data("DistanceFromReferenceLocation");
            return (distance1 - distance2);
        });

        $("#RetailerSearchSectionBody ul").append(TransferArray);
        $("#RetailerSearchSectionBody").scrollTop(0);

        $("#SpinnerControl").hide();
    }

ショーがレンダリングされない理由を誰か教えてもらえますか? 助けてくれてありがとう。

4

2 に答える 2

1

問題は、コードの実行が終了するまで画面に目に見える変更が加えられないことです。完了すると、要素はすでに非表示になっているため、表示されません。コードの実行中に要素を表示することが目的の場合は、次を使用しますsetTimeout。

$("#SpinnerControl").show();

setTimeout(function(){
    // do you stuff here

    $("#SpinnerControl").hide();
}, 1);
于 2012-05-18T19:09:22.933 に答える
1

一部のブラウザーでは、UI を更新するために制御をブラウザーに戻す必要があります。通常、Firefox では問題ありませんが、Chrome/IE では問題になります...

タイムアウトを使用して、ブラウザーも同様に機能するようにすることをお勧めします (これによりSortListByDistance非同期になることに注意してください)。

function SortListByDistance(SortReferenceLatitude, SortReferenceLongitude)
{
    $("#SpinnerControl").show();

    setTimeout( function( ) {
        $(".RetailerSearchSectionLine").each(function()
        {
            var SortLocationLatitude = $(".RetailLocationLatitude", $(this)).text();
            var SortLocationLongitude = $(".RetailLocationLongitude", $(this)).text();
            var DistanceFromReferenceLocation = CalculateDistance(SortReferenceLatitude, SortReferenceLongitude, SortLocationLatitude, SortLocationLongitude);
            $(this).data("DistanceFromReferenceLocation", DistanceFromReferenceLocation);
        });

        var TransferArray = $("#RetailerSearchSectionBody ul li").toArray().sort(function(a, b)
        {
            var distance1 = $(a).data("DistanceFromReferenceLocation");
            var distance2 = $(b).data("DistanceFromReferenceLocation");
            return (distance1 - distance2);
        });

        $("#RetailerSearchSectionBody ul").append(TransferArray);
        $("#RetailerSearchSectionBody").scrollTop(0);

        $("#SpinnerControl").hide();
    }, 1 );
}
于 2012-05-18T19:09:24.190 に答える