1

質問があります。そのような手法を実装するスクリプトを見たことがないことに非常に驚いていますが、自分で解決することはできないので、手がかりが必要です。私が欲しいものを見るには、この基本的なページをチェックしてください:

<!DOCTYPE html>

<html lang="en">

<head>

<style>

#loading{

display:none;

position: fixed;

width:500px;

height:200px;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -250px;

z-index: 1;

border:black thin solid;

background-color: gold;}

</style>

<script src="path/to/jquery.min.js"></script>

<script>

        $(document).ready(function () {

        $('.click').click(function () {

        $("#content").empty();

        var src = $(this).attr('data-source').split(';');
        var l = src.length;
        $("#loading").ajaxStart(function(){
        $(this).html("Loading, please wait...").show();
        }).ajaxStop(function(){
        $(this).hide();
        });
        if (src.length >= 1 && src.length <= 5) {
            $.get(src[0].substring(src[0].lastIndexOf('@') + 1), {}, function (data) {
                var $response = $('<div />').html(data);
                $('#content').append($response.find(src[0].substring(0, src[0].lastIndexOf('@'))));
            }, 'html').complete(function () {
                $('#loading').html('Loaded: 1. Total: ' + l);
                if (src.length >= 2) {
                    $.get(src[1].substring(src[1].lastIndexOf('@') + 1), {}, function (data) {
                        var $response = $('<div />').html(data);
                        $('#content').append($response.find(src[1].substring(0, src[1].lastIndexOf('@'))));
                    }, 'html').complete(function () {
                        $('#loading').html('Loaded: 2. Total: ' + l);
                        if (src.length >= 3) {
                            $.get(src[2].substring(src[2].lastIndexOf('@') + 1), {}, function (data) {
                                var $response = $('<div />').html(data);
                                $('#content').append($response.find(src[2].substring(0, src[2].lastIndexOf('@'))));
                            }, 'html').complete(function () {
                                $('#loading').html('Loaded: 3. Total: ' + l);
                                if (src.length >= 4) {
                                    $.get(src[3].substring(src[3].lastIndexOf('@') + 1), {}, function (data) {
                                        var $response = $('<div />').html(data);
                                        $('#content').append($response.find(src[3].substring(0, src[3].lastIndexOf('@'))));
                                    }, 'html').complete(function () {
                                        $('#loading').html('Loaded: 4. Total: ' + l);
                                        if (src.length >= 5) {
                                                         $.get(src[4].substring(src[4].lastIndexOf('@') + 1), {}, function (data) {
                                                var $response = $('<div />').html(data);
                                           $('#content').append($response.find(src[4].substring(0, src[4].lastIndexOf('@'))));
        }, 'html').complete(function () {
        $('#loading').html('Loaded: 5. Total: ' + l);
        });
        }
        });
        }
        });
        }
        });
        }
        });
        } 
        });
        });
        </script>
</head>
<body>
<span data-source="#part1, #part3, #part4@page1.html;#part2@page2.html;#part5@page1.html" class="click">Click me</span>
<div id="content">
</div>
<div id="loading">Loading, please wait...</div>
</body>
</html>

つまり、要素は、「data-source」属性で指定した順序で厳密に読み込まれます。このスクリプトは期待どおりに動作するように見えますが、問題は、考えられるすべての長さに対して個別の関数を「手動で」書きたくないということです!!! この作業を自動的に行うスクリプトが必要です! 私はこれを試しました：

   jQuery.each(src, function (i) {
            $.get(src[i].substring(src[i].lastIndexOf('@') + 1), {}, function (data) {
                var $response = $('<div />').html(data);
                var $ids = $response.find(src[i].substring(0, src[i].lastIndexOf('@')));
                $('#content').append($ids);
            }, 'html').complete(function () {
                $('#loading').html('Loaded: ' + (i + 1) + '. Total:' + l);
            });
        });

しかし、この場合、AJAX の性質と jQuery.each が無限の .complete(function () {... .complete(function () {... .complete(function ( ) {... 、特に同じページからのものである場合、要素は指定したのと同じ順序で追加されません。また、データソース属性を「page 1.html #part1, #part2」と記述し、次のようなものを使用します。

    jQuery.each(src, function (i) {
            $('<div />').attr('class', 'container').appendTo($('#content')).load(src[i], function() {
    $('#loading').html('Loaded: ' + (i + 1) + '. Total:' + l);
    });
        });

要素は正しい順序で追加されているように見えますが、それは私には理解できない方法で行われます: ある要素が別の要素を下に移動するだけで、既存の 2 つの要素の間に配置されます! しかし、読み込みメッセージの HTML がどこから来たのか想像できません。ページが最後から最初に読み込まれていることを示しているだけかもしれません。また、最初の Ajax 呼び出しの後に ajaxComplete イベントを使用して「data」属性を操作しようとしましたが、結果が得られませんでした。

それで、 ajaxComplete は .complete(function () {... .complete(function () {... .complete(function () {... ?この配列の最初の要素から始めて、他の要素は忘れてください。完了したら、次の要素に切り替えます...というように、最後まで"

4

1 に答える 1

0

再帰を伴う次の解決策をお勧めします。

var i = 0; 
var load = function (index) {
    $.get(src[index].substring(src[index].lastIndexOf('@') + 1), {}, function (data) {    
            var $response = $('<div />').html(data);    
            var $ids = $response.find(src[index].substring(0, src[index].lastIndexOf('@')));    
            $('#content').append($ids);    
        }, 'html').complete(function () {    
            $('#loading').html('Loaded: ' + (index + 1) + '. Total:' + l);
                          if(index +=1){
                load(index += 1); //recursion
                          }
        });
}
load(i);
于 2012-10-11T09:25:11.730 に答える