Javascriptの自動読み込み画像スクリプトが機能しない

debugcn 投稿 Dev

クラマ

スクロール時に写真が読み込まれない

SyntaxError：引数リストの後に）がありません1：221 ReferenceError：json_loadsが定義されていません1：236

写真を読み込んでウェブページに表示する機能です

function json_loads(load_count, photo_count) {
    $.getJSON('/json_album_detail/', {
        'album_id': {{ object.id }},
        'count': photo_count, // min 3!!
        'load_count': load_count
        }, function(data) {
        console.log(data);



        for(item in data) {
            last_item = item;

             id = 'scrolling';
              console.log('Id: ' + id)
        }

        console.log(data.length);
        for(i=1, count=2; i<=last_item; i++, count++) {

            newdiv = document.createElement("div");
            mydiv = document.getElementById(id);
            newdiv.className='project-img';
            newhref = document.createElement("a");
            newimg = document.createElement("img");
            newimg.setAttribute('src', data[i].url);
            newhref.setAttribute('href', data[i].url);
            newdiv.appendChild(newhref);
            newdiv.appendChild(newimg);
            mydiv.appendChild(newdiv);


        }

}
}

下にスクロールすると関数を実行します

var scroll_count = 0
var load_count = 3
var photo_count = 4
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
console.log('scrollHeight: ' + scrollHeight);
var scrollPosition = $(window).height() + $(window).scrollTop();
console.log('scrollPosition: ' + scrollPosition);
console.log('To event = ' + (scrollHeight - scrollPosition) / scrollHeight);
if ((scrollHeight - scrollPosition) / scrollHeight < 0.01) {
    json_loads(load_count, photo_count);
    scroll_count = scroll_count+1;
    console.log(scroll_count);
    photo_count = photo_count+1;
    load_count = load_count+1;
}


});

テストサイト： http://54.93.51.225/album/1/

geedubb

いくつかの閉じ中括弧がありません。このようなエラーを最小限に抑えるために、中かっこに一致し、コードをフォーマットするテキストエディターを使用することをお勧めします。

あなたの関数は私が思うにこのように見えるはずです：

 function json_loads(load_count, photo_count) {
$.getJSON('/json_album_detail/', {
    'album_id': 1,
        'count': photo_count, // min 3!!
    'load_count': load_count
}, function (data) {
    console.log(data)
    for (item in data) {
        last_item = item

        id = 'scrolling'
        console.log('Id: ' + id)
    }

    console.log(data.length)
    for (i = 1, count = 2; i <= last_item; i++, count++) {

        function spinner() {
            document.getElementById("spinner").className = "fa fa-spinner fa fa-circle-o-notch fa-spin fa-2x";
        }

        function upper() {
            document.getElementById("spinner").className = "fa fa-chevron-circle-up fa-3x";
        }

        setTimeout(spinner, 1000);

        newdiv = document.createElement("div");
        mydiv = document.getElementById(id);
        newdiv.className = 'project-img';
        newhref = document.createElement("a");
        newimg = document.createElement("img");
        newimg.setAttribute('src', data[i].url);
        newhref.setAttribute('href', data[i].url);
        newdiv.appendChild(newhref);
        newdiv.appendChild(newimg);
        mydiv.appendChild(newdiv);

        setTimeout(upper, 1000);

    }
  }); // *** you are missing this!
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]