Streaming live at 10am (PST)

Images on designer not appearing on live site

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


Live site

View on Webflow

Live Site

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:

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

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

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

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.

All good, thank you for your help

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

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

It starts hiding at: 1440px

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

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

<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 ^

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

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.

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