jQuery LazyLoad在滚动之前不加载图像

Question

jQuery LazyLoad不会在打开页面的可见部分加载图像,直到我在1px上滚动页面.

当我滚动页面所有工作正确

更新:

CoffeScript

jQuery ->
   $("img.lazy").show().lazyload()
   $(window).resize()

但$(window).resize()只有在我加载页面时从浏览器的控制台输入它才有帮助

Answer 1

$("img.lazy").lazyload({
             threshold : 50
         });

并添加这个:

$(window).load(function(){
     $("html,body").trigger("scroll");
});

Answer 2

我来得太晚了，但如果您仍然面临这个问题，请在您所需的事件上使用纯 javascript setTimeout() 和 window.scrollBy() 组合。我在Click上解决了这个问题，因为我必须在选项卡式窗格下显示图像，其中只有第一个加载的选项卡在页面加载时显示图像，但其余选项卡在单击时不会显示，直到用户滚动一下。我的代码如下：

function myFunction() {
  setTimeout(function() {
    window.scrollBy(0, 100)
  }, 1000);;
}

<style>
  div {
    background-color: #FF9900;
    height: 999px;
    width: 100%;
  }
</style>

<a href="#" onClick="myFunction()">Click me to scroll after 1000 milliseconds</a>
<div></div>

此示例在单击 url 后 1000 毫秒将页面向下滚动 100px。最好在 400 毫秒后使用 1px 滚动，以使其不被注意到/无缝。希望这可以帮助。

Answer 3

您的图像必须设置宽度和高度。