运行 jquery 浏览器上的脚本 window 视图

Question

我正在学习 jquery，正在尝试运行在浏览器 window 上查看此 jquery 脚本。表示脚本将运行，当 class="load-delay" 有浏览器 window 通过滚动浏览器查看时。实际上这个脚本在 7 秒后加载图像。

jquery 脚本：

setTimeout(function () {
    $('.load-delay').each(function () {
      var imagex = $(this);
      var imgOriginal = imagex.data('original');
      $(imagex).attr('src', imgOriginal);
    });
  }, 7000);

现在是在 7 秒后加载图像，但我想在 Window View

上加载

HTML:

<h1>It Load Image after 7 second not on Window View</h1>
<img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg"/>

问题提示：http://jsfiddle.net/amf7ca4f/4/

我的问题是如何在滚动浏览器时将其加载到 window 视图 window method 上。仅在滚动查看时才加载 img，无需 LayLoad 插件。

我希望有人能给我一些尝试的建议。

提前致谢。

Answer 1

好的。让我们看看我们是否能做到这一点。我们需要滚动到一个图像，然后在到达端口视图时显示它。

如果你尝试这样的事情怎么办？检查用户是否滚动，然后检查底部视图位置并与图像的顶部位置进行比较。如果底部视图高度 >= 到图像顶部位置的高度，则可以加载图像。

var $w = $(window); 
   $w.scroll(function() {

    var bottom_edge_y = $w.scrollTop()  + $w.height();

    //image class = .load-delay
    var position = $(".load-delay").position();
    if(bottom_edge_y >= position.top)
    {
         //alert("window: " + bottom_edge_y + "image: " + position.top );
        $(".load-delay").attr("src", "http://oi42.tinypic.com/9sqmaf.jpg");
        $(this).off();
    }
});

编辑：完成，这将在滚动到图像时显示图像。

如果你想在滚动 +7 秒时显示你的图像，这里是：

var $w = $( window );

$w.scroll(function() {
    var $w = $(window);
    var bottom_edge_y = $w.scrollTop()  + $w.height();
    var position = $(".load-delay").position();
    if(bottom_edge_y >= position.top)
    {
        //alert("window: " + bottom_edge_y + "image: " + position.top );

        setTimeout(function () {
    $('.load-delay').each(function () {
      var imagex = $(this);
      var imgOriginal = imagex.data('original');
      $(imagex).attr('src', imgOriginal);
    });
  }, 7000);

        $(this).off();

    }
});

运行 jquery 浏览器上的脚本 window 视图

Run jquery script on browser window view

jquery

load