1. 首页
  2. 问答
  3. 加载懒惰后给予警报

加载懒惰后给予警报

2017-02-13 66 views
1

我正在使用lazySizes jquery plugin，我想在我的懒加载时有警报，我怎么能为我所有加载的内容做？我想为我的AJAX内容做到这一点，如果我有警惕，我想我能处理什么我想要做的加载懒惰后给予警报

body { 
 
    padding: 30px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.teaser.lazyload { 
 
    opacity: 0; 
 
    transform: scale(0.8); 
 
} 
 
.teaser.lazyloaded { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    transition: all 700ms; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>

click to see codepen

来源

2017-02-13 ani_css

回答

1

这个插件没有很好的记录这个文件，但是有几个事件被它触发，即lazybeforeunveil,lazybeforesizes和lazyunveilread。我不知道他们的确切顺序，但你可以为了达到你想要的东西绑定到lazyunveilread：

$('.teaser.lazyload').on('lazyunveilread', function(ev) { 
 
    alert("foo!"); 
 
    console.log(ev.target); // <-- that's how you can get the element that has been loaded 
 
});
@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"; 
 
    
 
    body{ 
 
    padding:30px; 
 
    width:80%; 
 
    margin:0 auto; 
 
} 
 
.teaser.lazyload { 
 
\t opacity: 0; 
 
\t transform: scale(0.8); 
 
} 
 

 
.teaser.lazyloaded { 
 
\t opacity: 1; 
 
\t transform: scale(1); 
 
\t transition: all 700ms; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script> 
 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div>

来源

2017-02-13 11:30:27 Connum

+0

嗨它是一个很好的例子，但有没有什么办法只有lazy_content类..我的意思是只是'lazy_content'类 –

+0

恐怕我不明白你的问题 – Connum

0

我想你可以使用jQuery“滚动（ ）“来检查页面是否完全滚动下来，因为据我所知，当我们滚动页面时，lazyloading会起作用，因此您需要捕获您位于页面底部以显示警报。

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
    alert("Bottom Of the Page"); 
    } 
});

请标记并投票，如果解决方案是有用的。

谢谢！

来源

2017-02-13 11:28:19

+0

该操作说明“我怎么能为我所有加载的内容” - 所以我不认为他正在寻找这样的解决方案。 – Connum

0

Lazysizes可是没有任何明确的事件处理程序，知道什么时候该lazyload是完成。你也不需要它。 一般而言，您需要的是lazybeforeunveil来修改图像加载时通知的转换或加载。

在某些特定情况下，您可以在lazybeforeunveil内使用setImmediate/setTimeout。

$(document).on('lazybeforeunveil', function(){ 
    //do your stuff.. (setTimeout if required) 
});

这是相当一致的。希望它有帮助

来源

2017-02-13 11:32:15 Khaleel

相关问题

 相关问题