0

当视口为 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/");
    }
}

因此，为了确认，我只想在屏幕宽度为 1250 像素或更宽且用户位于页面底部以便父 div 可见（.tweet）时调用此内容。

任何帮助，将不胜感激。

我在这里添加了一个代码笔进行测试http://codepen.io/anon/pen/ezksD

4

2 回答 2

0

我认为您必须找出用户滚动了多远才能识别是否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;
    }
 });
}

希望对您有所帮助。

于 2013-07-07T17:16:39.660 回答
0

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

function checkSize(){
    if ($(window).width() > 1250 && $(".tweet").offset().top < $(window).scrollTop())  {
        $(".tweet").load("/ajax/");
    }
}
于 2013-07-07T17:17:14.430 回答