Images on designer not appearing on live site

Community resources Bugs
1

Hi, I have these 3 images on my site as the background of Div boxes, they show perfectly fine within the designer but do not appear on the live site?

TYA

Designer

image
image1072×623 156 KB

Live site
image
image1145×767 17.7 KB

View on Webflow

Live Site

2

What happens if you put an actual image in the div instead of a background?

Also your lazyloading code doesn’t work because of this:

image
image716×56 2.9 KB

You need to import jquery before that code. This might glitch with WF interactions? I don’t know.

3

That does work, i have tried this. however they still go really glitchy, as in, if i set the image to cover, it would still just get squished which is really weird

4

This is my Lazyload script

<script src="https://cdn.jsdelivr.net/npm/lazysizes@4.1.8/lazysizes.min.js" integrity="sha256-fTBo7ekO22pjfhP1rQs1prKEo4Iu8eVPODvm0oOL5Xc=" crossorigin="anonymous"></script>
<script type="text/javascript">
 $(document).ready(function() {
   // lazyloading
   window.lazySizesConfig = window.lazySizesConfig || {};
   window.lazySizesConfig.init = false;
   $('.lazyload').each(function() {
       $(this).attr('data-src', $(this).attr('src'));
       $(this).removeAttr('src');
       $(this).attr('data-srcset', $(this).attr('srcset'));
       $(this).removeAttr('srcset');
       $(this).removeAttr('sizes');
       $(this).attr('data-sizes', 'auto');
       lazySizes.init();
   });
 });
</script>

I got this from Flowbase

5

Move the jQuery script to your head section, before the lazysizes.min.js to make the document ready function work:

<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5e733ae5fa649813ba5a2a61" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

I’m looking into the images too.

6

All good, thank you for your help

7

I am super lost on doing the lazyload bit, I am far from knowledgeable for coding. Could u explain this in a bit more detail for me?

TYA

8

I noticed your images does show when I make the screen smaller in width:

image
image1143×901 173 KB

It starts hiding at: 1440px

image
image1138×750 87.5 KB

9

Your lazy loading script needs jQuery (javascript library) to get it to work. If you could make it like this:

Hmm… can’t paste it as code… wait

10

Well that is super weird, I have set the width values to fixed figures and it has fixed that issue.
Thank you!

11 
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5e733ae5fa649813ba5a2a61" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/lazysizes@4.1.8/lazysizes.min.js" integrity="sha256-fTBo7ekO22pjfhP1rQs1prKEo4Iu8eVPODvm0oOL5Xc=" crossorigin="anonymous"></script>

<script type="text/javascript">
 $(document).ready(function() {
   // lazyloading
   window.lazySizesConfig = window.lazySizesConfig || {};
   window.lazySizesConfig.init = false;
   $('.lazyload').each(function() {
       $(this).attr('data-src', $(this).attr('src'));
       $(this).removeAttr('src');
       $(this).attr('data-srcset', $(this).attr('srcset'));
       $(this).removeAttr('srcset');
       $(this).removeAttr('sizes');
       $(this).attr('data-sizes', 'auto');
       lazySizes.init();
   });
 });
</script>

Your lazy loading script needs jQuery (javascript library) to get it to work. If you could make it like this above ^

12

Done & Published, Where do i go about seeing if this has worked?

13

If you use Chrome, you could press F12 to see if there are any errors (red texts). There aren’t errors on your website anymore regarding your lazyloading. So I guess it should work.

14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.