繁体   English   中英

延迟加载不等待单击以加载折叠后的图像

[英]Lazy Load doesn't wait for click to load images that are above the fold

我目前在图像繁重的网页上使用延迟加载,并且我不希望在单击按钮之前加载图像。 延迟加载允许您具有这样的事件触发器,但我只能使其部分起作用。

折叠下方的图像等待出现单击,但是在最初启动页面时,折叠上方的任何内容都会被加载。 这是无法避免的,还是我做错了?

下面是我正在使用的代码。

<body>

  <script src="jquery.js"></script>
  <script src="jquery.lazyload.js"></script>

  <img src="blank.gif" class="lazy" data-original="image.png" style="height: 500px; width: 500px;">

  <script>
     $("img.lazy").lazyload({
       event : "click",
       effect : "fadeIn"
     });
  </script>

</body>

我认为问题是click事件未绑定到html元素(例如按钮)。 插件无法立即解决此问题。

因此,我将使用另一个插件(例如justlazy ),它更适合您的特殊用例。

 <body> <script src="jquery.js"></script> <script src="justlazy.js"></script> <span data-src="default/image" data-alt="some alt text" title="some title" class="justlazy-placeholder"> </span> <script> $("#someButton").click(function() { $(".justlazy-placeholder").each(function() { Justlazy.lazyLoad(this); }); return false; }); </script> </body> 

插件的演示页面提供了很多示例。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM