Question

当视口为1250像素或更宽时，我有一个我目前在我的网站上显示的Twitter提要。因此，当屏幕足够宽时，它会调用一些内容（调用twitter脚本的javaScript文件。

我目前的代码就是这个......

function checkSize(){
    if ($(window).width() > 1250) {
        $(".tweet").load("/ajax/");
    }
}

checkSize();

$(window).resize(function() {
    checkSize();
});

现在这个工作正常，但是由于twitter脚本位于页面底部附近，如何在用户视图中显示div时才加载脚本？

我尝试了类似这样的东西但不起作用

function checkSize(){
    if ($(window).width() > 1250 && $(".tweet").is(':visible'))  {
        $(".tweet").load("/ajax/");
    }
}

所以要确认，我想只在屏幕宽度为1250px或更宽时才调用此内容，当用户位于页面底部时，父级div可见（.tweet）。

任何帮助都将不胜感激。

我添加了一个codepen来测试http://codepen.io/anon/pen/ezksD

Answer 1

我认为如果div可见，您必须知道用户滚动到多远才能识别。所以你可以做的是（从移动设备写这个并没有检查你的代码是否有语法错误）：

var loaded = false;
var proximity = 0;

if (loaded == false){
 $(window).scroll(function () {
    var scrollBottom =   $(".tweet").offset().top - $(window).scrollTop();
    var windowWidth = $(window).width();
    if (scrollBottom <= proximity && windowWidth > 1250 && loaded == false)
    {
         $(".tweet").load("/ajax/");
         loaded = true;
    }
 });
}

希望对你有所帮助。

Answer 2

这将确定用户是否已向下滚动足够远以使其可见。

function checkSize(){
    if ($(window).width() > 1250 && $(".tweet").offset().top < $(window).scrollTop())  {
        $(".tweet").load("/ajax/");
    }
}

如果屏幕足够宽并且父视图在视图中，则加载脚本

2 个答案: