javascript - 加载懒惰后发出警报

Question

我正在使用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

Answer 1

该插件没有很好地记录这一点，但它触发了几个事件，即 lazybeforeunveil、lazybeforesizes 和 lazyunveilread。我不确定它们的确切顺序，但您可以绑定(bind)到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 {
	opacity: 0;
	transform: scale(0.8);
}

.teaser.lazyloaded {
	opacity: 1;
	transform: scale(1);
	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>