Javascript自动加载图像脚本不起作用

时间:2014-12-28 10:52:45

标签: javascript jquery json function autoload

滚动时的照片加载不起作用

  参数列表1后面的

SyntaxError:missing):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/

1 个答案:

答案 0 :(得分:1)

你缺少一些结束括号。我建议使用与您的大括号匹配的文本编辑器并格式化您的代码以最大限度地减少此类错误。

我认为你的功能应该是这样的:

 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!
}