Question

我正在学习jquery，试图在浏览器窗口视图上运行这个jquery脚本。当class="load-delay"通过滚动浏览器浏览器窗口视图时，表示将运行脚本。实际上这个脚本在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"/>

问题Fiddel：http://jsfiddle.net/amf7ca4f/4/

我的问题是滚动浏览器时如何在窗口视图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脚本

1 个答案: