动态内容未在移动设备上加载

时间:2015-06-16 12:32:23

标签: javascript php jquery ajax wordpress

这是有问题的页面:http://f6d.28a.myftpupload.com/blog/

此页面上的所有帖子都使用了jquery。

如果我使用ctrl + shift + m测试页面页面工作正常,页面在桌面上工作正常,即使在Firefox上也是如此。

但是当我在iphone 5s,iOS 8.2上打开此页面时,没有帖子正在加载。

加载这些帖子的代码如下:

jQuery(function($){
var $grid = $('.post-area').masonry({
      itemSelector: '.post-area .box',
    });
var page = 1;
var loading = true;
var $window = $(window);
var $content = $("body #main");
var load_posts = function( cat = $("input[name='cat_id']").val(), year = '', orderby = '' ){
        if((cat != '' || year != '' || orderby != '') &&  page == 1){
            $content.html('');
            $content.append('<div id="temp_load" style="text-align:center">\
                        <img src="http://f6d.28a.myftpupload.com/wp-content/themes/bob/images/ajax-loader.png" />\
                        </div>');
        }

        $.ajax({
            type       : "GET",
            data       : {numPosts : 1, pageNumber: page, cat: cat, year: year, orderby: orderby},
            dataType   : "html",
            url        : "http://f6d.28a.myftpupload.com/wp-content/themes/bob/template-parts/loopHandler.php",
            beforeSend : function(){
                if(page != 1){
                    $content.append('<div id="temp_load" style="text-align:center; bottom: 0; left: 0; position: absolute; right: 0;">\
                        <img src="http://f6d.28a.myftpupload.com/wp-content/themes/bob/images/ajax-loader.png" />\
                        </div>');
                }
            },
            success    : function(data){

                $data = $(data);
                if($data.length){
                    $data.hide();
                    $content.append($data);
                    $grid.append( $data ).masonry( 'appended', $data );
                    $grid.masonry( 'reloadItems' );
                    $grid.masonry( 'layout' ); 
                    $data.fadeIn(500, function(){
                        $("#temp_load").remove();
                        loading = false;
                    });
                } else {
                    $("#temp_load").remove();
                }
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
    });
}
$window.scroll(function() {
    var content_offset = $content.offset();
    console.log(content_offset.top);
    if(!loading && ($window.scrollTop() +
        $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
            loading = true;
            var cat = $('select[name="cat"]').val();
            var year = $('select[name="year"]').val();
            var orderby = $('select[name="orderby"]').val();
            page++;
            load_posts( cat, year, orderby );
    }
});
$('select[name="cat"]').on('change', function() {
    var cat = $(this).val();
    var year = $('select[name="year"]').val();
    var orderby = $('select[name="orderby"]').val();
    page = 1;
    load_posts(cat, year, orderby);
});

$('select[name="year"]').on('change', function() {
    var year = $(this).val();
    var cat = $('select[name="cat"]').val();
    var orderby = $('select[name="orderby"]').val();
    page = 1;
    load_posts(cat, year, orderby);
});

$('select[name="orderby"]').on('change', function() {
    var orderby = $(this).val();
    var cat = $('select[name="cat"]').val();
    var year = $('select[name="year"]').val();
    page = 1;
    load_posts(cat, year, orderby);
});

load_posts();
});

有些人可以指导我这个....

0 个答案:

没有答案