Lazy Loading in kirby

Kirby 2 Solved ✅
1

hello everyone,

i have implemented lazy loading in simple html/php language.that is not working in kirby cms.i have studied all links.

if is there anyone who has implemented lazy loading (images and text) without plugin then please help me.

2

Have you written your implementation in secret virtual ink? What do I have to do to make it visible :wink:?

3

all that links contains jquery library . please help me to lazy load in kirby.

4

What I think @texnixe mean is that you have not presented any code here. Without code it’s hard to figure out why it does not work for you.

5

i am not saying that there is error in my code. i have already implemented same code in my wordpress website.

i want to say that how to impelement lazy loading in kirby?

6

i have implemented lazy loading in simple html/php language.

If you let us know what you have, we can help to convert that for Kirby.

Otherwise, if you don’t want to code anything yourself, check out the ImageKit plugin.

As an alternative, you can use the lazysizes.js library.

7

i have used this link in my previous project in wordpress. and it was working good.
but when i use this for kirby when i write data-src instead of src for image like

<img src="...imagepath">
<img data-src="...imagepath" class="lazy">

image is not displayed.

now i hope you get clear idea.

1 Like
8

Well there are a lot of areas where something can go wrong you would need to provide more informations (or code examples).

  • How did you include the script in kirby
  • Is jQuery loaded
  • Is the script actually loaded
  • How and where do you initiate the script

Edit:
To your edit. What does console.log($('.lazy')); log in the console?

9

What you should have done to make it:

  • include jQuery in the footer
  • include the lazy loading script
  • initilize lazy loading as in the script documentation

So your footer should look something like this:

<?= js('assets/js/jquery.min.js') ?>
<?= js('assets/js/jquery.lazy.min.js') ?>
<script>
$(document).ready(function() {
  $('.lazy').Lazy();
});
</script>
10

problem is with that image code

if i write data-src it not loads image.

11

How do you echo the image path, like this?

<?php foreach($page->images() as $image): ?>
   <img class="lazy" data-src="<?= $image->url() ?>" />
<?php endforeach ?>
12

yes sir…whats the problem with that?

13

No problem, just wanted to make sure, because you didn’t post your code. This is how it should be.

We can’t help you without your code, I’m afraid.

Check developer tools to make sure that jQuery and the lazy load script are loaded. Make sure there are no errors in console. Check if the resulting URL is correct.

1 Like