Lazy Load doesn't wait for click to load images that are above the fold
Question
I am currently using Lazy Load on an image heavy webpage, and I don't want the images to load until I click a button. Lazy Load allows you to have event triggers like this, but I can only make it partially work.
Images below the fold wait for a click to appear, but anything above the fold is loaded when the page is initially brought up. Is this something that cannot be prevented, or am I doing something wrong?
Below is the code I am using.
<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>
1 answers
solution1
0 2015-12-06 11:19:18
I think the problem is, that the click event is not bound to an html element, eg a button. The plugin is not able to handle this out of the box.
So, I would use another plugin (eg justlazy ), which is more suitable for your special use case.
<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>
The demo page of the plugin provides a lot of examples.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.