Doesn’t lazy load images

  • So I installed the plugin but it doesn’t lazy load my images.
    Looking at the source code I can see it added the javascript files and such, but it doesn’t add any tags or anything to my images. Do the images need to be added a certain way? Do I need to add the lazy class myself? There’s no documentation within the plugin so I assumed it would be some magical plug and play thing.

    Any ideas?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    It should work magical without manually adding a class if everything works as expected ??

    Could you post a link to the site with the problem?

    Thread Starter dem0n

    (@dem0n)

    It’s in local development now I’m afraid.

    Well okay … I’ve tried adding the class “lazy” or “lazyload” manually to the images that need loading. But that didn’t work.

    <img class="<?php echo $portfolio_width; ?>" src="<?php echo $portfolio_image['sizes']['work-full-image']; ?>" title="<?php echo $portfolio_image['title'] ?>" alt="<?php echo $portfolio_image['alt'] ?>" />

    • This reply was modified 7 years, 8 months ago by dem0n.
    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Ah okay, you are using ACF or something like that to create a list of images? In that case, it should work to add the class lazyload manually – that is the class which the lazy load script uses (and the plugin adds automatically to content images, gallery images and post thumbnails).

    But you have to modify the img markup like that: https://github.com/aFarkas/lazysizes#how-to (with the data- attributes instead of src et cetera).

    Thread Starter dem0n

    (@dem0n)

    ACF, yeah ??

    Hmm. I updated it as you said, but still can’t see any lazy loading happening.
    Here’s my code:

    <img class="lazyload full" data-src="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3-1800x666.jpg" title="fb-timeline_header6-3" alt="Header Illustration" />

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Strange… Any errors in the JS console?

    Thread Starter dem0n

    (@dem0n)

    No ??
    Here’s the whole thing.

    <!DOCTYPE html>
<html class="no-js" lang="en-US" prefix="og: https://ogp.me/ns#" >
	<head>
		<title>Header Illustration - Portfolio of Konrad Dobson v8.0</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<link rel="profile" href="https://gmpg.org/xfn/11">
		<!-- <link rel="shortcut icon" type="image/x-icon" href="https://dev.dobson.be/wp-content/themes/dobson_v8/assets/images/favicon/favicon.ico" /> -->

<!-- This site is optimized with the Yoast SEO plugin v5.0.1 - https://yoast.com/wordpress/plugins/seo/ -->
<!-- Admin only notice: this page doesn't show a meta description because it doesn't have one, either write it for this page specifically or go into the SEO -> Titles menu and set up a template. -->
<link rel="canonical" href="https://dev.dobson.be/work/header-illustration/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Header Illustration - Portfolio of Konrad Dobson v8.0" />
<meta property="og:url" content="https://dev.dobson.be/work/header-illustration/" />
<meta property="og:site_name" content="Portfolio of Konrad Dobson v8.0" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Header Illustration - Portfolio of Konrad Dobson v8.0" />
<!-- / Yoast SEO plugin. -->

<link rel='dns-prefetch' href='//s.w.org' />
<link rel='stylesheet' id='wpml-legacy-horizontal-list-0-css'  href='https://dev.dobson.be/wp-content/plugins/sitepress-multilingual-cms/templates/language-switchers/legacy-list-horizontal/style.css?ver=1' type='text/css' media='all' />
<link rel='stylesheet' id='dobson_v8-style-css'  href='https://dev.dobson.be/wp-content/themes/dobson_v8/assets/style.css?ver=20170413' type='text/css' media='' />

<!-- This site uses the Google Analytics by MonsterInsights plugin v 6.2.0 - https://www.monsterinsights.com/ -->
<!-- Normally you will find the Google Analytics tracking code here, but the webmaster disabled your user group. -->
<!-- / Google Analytics by MonsterInsights -->

<link rel='https://api.w.org/' href='https://dev.dobson.be/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://dev.dobson.be/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://dev.dobson.be/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.8" />
<link rel='shortlink' href='https://dev.dobson.be/?p=174' />
<link rel="alternate" type="application/json+oembed" href="https://dev.dobson.be/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fdev.dobson.be%2Fwork%2Fheader-illustration%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://dev.dobson.be/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fdev.dobson.be%2Fwork%2Fheader-illustration%2F&format=xml" />
<style>.js img.lazyload {
			display: block;
		}

img.lazyload {
			display: none;
		}</style><meta name="generator" content="WPML ver:3.6.2 stt:38,1;" />

	</head>

	<body class="work-template-default single single-work postid-174 logged-in">
<div class="closebutton"><a onclick="history.go(-1);"><img src="https://dev.dobson.be/wp-content/themes/dobson_v8/assets/images/[email protected]" width="46" height="46" title="Close Page" alt="Close Page" /></a></div>

<div class="container">

	<div class="left">
		<div class="logo">
			<a href="https://dev.dobson.be">
				<img src="https://dev.dobson.be/wp-content/themes/dobson_v8/assets/images/[email protected]" width="109" height="119" title="Konrad Dobson v8.0 Logo" alt="Konrad Dobson v8.0 Logo" />
				<div class="nametitle">
					<p class="name">Konrad<br />Dobson</p>
					<p class="title">Digital Creative</p>
				</div>
			</a>
		</div>  <!-- end logo -->
	</div> <!-- end logoarea -->

<div class="right">

	<div class="title">
		<h1>Header Illustration</h1>
	</div>

<!-- 	Posted on May 12th, 2017 by admin<br /> -->

	<div class="clientagency">

	Type:

	<a href="https://dev.dobson.be/portfolio_cats/illustration/">Illustration</a>&nbsp;
<br />

	Client:

	<a href="https://dev.dobson.be/client/personal/">Personal</a>&nbsp;
<br />

	Agency:

	<a href="https://dev.dobson.be/agency/none/">None</a>&nbsp;
<br />

<!-- 	<span class="">Illustration</span> -->

	</div> <!-- end clientagency -->

<!-- 
<br />
Client: <br />
Agency:  -->

</div> <!-- end right -->

	<button class="accordion">Project Info</button>
	<div class="panel">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta, odio non porttitor consequat, justo urna convallis mauris, eu condimentum diam sem in odio. Nullam ultrices, eros at ultrices laoreet, leo urna vulputate diam, ut eleifend libero erat a dolor. Proin vitae dictum tellus. Etiam tempor sit amet lorem vel blandit. Nam purus nisl, pellentesque sed odio sit amet, hendrerit fermentum massa. Aliquam convallis tempus lorem, sit amet tincidunt dui vulputate lacinia. Vestibulum sapien justo, pulvinar eget tempus vitae, dictum in felis. Ut eget sem risus. Pellentesque faucibus tempor sapien, vitae venenatis ipsum hendrerit quis.</p>
<p>Cras fermentum diam in efficitur egestas. Etiam in nibh accumsan nulla rutrum luctus a vel libero. In eu sem diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus est urna, vulputate vel mauris sit amet, luctus malesuada arcu. In hac habitasse platea dictumst. Donec non arcu venenatis, venenatis odio a, interdum arcu. Maecenas viverra porta neque, vitae venenatis eros efficitur in. Aenean porta purus eget arcu pulvinar consequat. Donec faucibus fringilla erat. Nulla venenatis tincidunt mattis. Nullam et tristique mauris. Aenean aliquam neque et mollis tempus. Donec vitae iaculis leo. Sed rhoncus lobortis dignissim. Quisque sit amet felis et mauris feugiat feugiat vitae a lectus.</p>
	</div>

			
		
		<!-- 
			<img class="full" src="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3-1800x666.jpg" title="fb-timeline_header6-3" alt="Header Illustration" />
 -->

<img class="lazyload full" data-src="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3-1800x666.jpg" title="fb-timeline_header6-3" alt="Header Illustration" />

<!--
			<img class="lazyload full" data-original="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3-1800x666.jpg" title="fb-timeline_header6-3" alt="Header Illustration" />
			<noscript><img class="full" src="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3-1800x666.jpg" title="fb-timeline_header6-3" alt="Header Illustration" /></noscript>
-->

		
		
		
		<!-- 
			<img class="full" src="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3_steps.gif" title="fb-timeline_header6-3_steps" alt="" />
 -->

<img class="lazyload full" data-src="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3_steps.gif" title="fb-timeline_header6-3_steps" alt="" />

<!--
			<img class="lazyload full" data-original="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3_steps.gif" title="fb-timeline_header6-3_steps" alt="" />
			<noscript><img class="full" src="https://dev.dobson.be/wp-content/uploads/2017/05/fb-timeline_header6-3_steps.gif" title="fb-timeline_header6-3_steps" alt="" /></noscript>
-->

		
		
		
		<!-- 
			<img class="half" src="https://dev.dobson.be/wp-content/uploads/2017/05/closeup1.jpg" title="closeup1" alt="" />
 -->

<img class="lazyload half" data-src="https://dev.dobson.be/wp-content/uploads/2017/05/closeup1.jpg" title="closeup1" alt="" />

<!--
			<img class="lazyload half" data-original="https://dev.dobson.be/wp-content/uploads/2017/05/closeup1.jpg" title="closeup1" alt="" />
			<noscript><img class="half" src="https://dev.dobson.be/wp-content/uploads/2017/05/closeup1.jpg" title="closeup1" alt="" /></noscript>
-->

		
		
		
		<!-- 
			<img class="half" src="https://dev.dobson.be/wp-content/uploads/2017/05/closeup2.jpg" title="closeup2" alt="" />
 -->

<img class="lazyload half" data-src="https://dev.dobson.be/wp-content/uploads/2017/05/closeup2.jpg" title="closeup2" alt="" />

<!--
			<img class="lazyload half" data-original="https://dev.dobson.be/wp-content/uploads/2017/05/closeup2.jpg" title="closeup2" alt="" />
			<noscript><img class="half" src="https://dev.dobson.be/wp-content/uploads/2017/05/closeup2.jpg" title="closeup2" alt="" /></noscript>
-->

		
			
	

</div> <!-- end container -->

<script type='text/javascript' src='https://dev.dobson.be/wp-content/themes/dobson_v8/assets/js/libs/jquery-3.2.1.js?ver=20170413'></script>
<script type='text/javascript' src='https://dev.dobson.be/wp-content/themes/dobson_v8/assets/js/app.js?ver=20170413'></script>
<script type='text/javascript' src='https://dev.dobson.be/wp-content/plugins/lazy-loading-responsive-images/js/lazysizes.min.js?ver=4.8'></script>
<script type='text/javascript'>
if (!document.documentElement.classList.contains('js')) {
			document.documentElement.classList.add('js');
		}
		
</script>
<script type='text/javascript' src='https://dev.dobson.be/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var icl_vars = {"current_language":"en","icl_home":"http:\/\/dev.dobson.be","ajax_url":"http:\/\/dev.dobson.be\/wp-admin\/admin-ajax.php","url_type":"3"};
/* ]]> */
</script>
<script type='text/javascript' src='https://dev.dobson.be/wp-content/plugins/sitepress-multilingual-cms/res/js/sitepress.js?ver=4.8'></script>

<!-- 

<br />

this is NOT the work page! -->

<!-- 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>

<script type="text/javascript" charset="utf-8">
 $("img.lazy").lazyload({
    effect : "fadeIn"
    // threshold : 200
});
</script>
 -->

	</section> <!-- end main -->

</body>
</html>

<script src="https://dev.dobson.be:35729/livereload.js"></script>
    Thread Starter dem0n

    (@dem0n)

    No ??

    I can see the plugin has added 

    <style>.js img.lazyload {
			display: block;
		}

img.lazyload {
			display: none;
		}</style>

    And 

    <script type='text/javascript' src='https://dev.dobson.be/wp-content/plugins/lazy-loading-responsive-images/js/lazysizes.min.js?ver=4.8'></script>
<script type='text/javascript'>
if (!document.documentElement.classList.contains('js')) {
			document.documentElement.classList.add('js');
		}
		
</script>

    But that’s about it.

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Yes, that looks correct, it does not add more things… One question: if you check a image in the developer tools, is there the lazyload class or a lazyloaded class?

    Thread Starter dem0n

    (@dem0n)

    Oh! It’s changed it to lazyloaded class. That’s odd. But I guess we’re getting somewhere now ??

    It’s changed ALL images to lazyloaded. Even the images that shouldn’t be loaded yet.

    • This reply was modified 7 years, 8 months ago by dem0n.
    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Okay, could you try to add some content above the images, so they are further down on the page (just to check if it works then)? The problem could be that the img elements are too close to the visible area, so the lazy load script loads them on page load.

    Thread Starter dem0n

    (@dem0n)

    Hmm yes I have to add like 110 line breaks before the class stays at lazyload. Then as soon as I scroll, it turns to lazyloaded, even before the images are visible on the screen.

    Is this perhaps a CSS styling conflict or something?

    • This reply was modified 7 years, 8 months ago by dem0n.
    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Maybe… It is wanted behavior, that the images are loaded before they are visible. If you take a look at the official demo: https://afarkas.github.io/lazysizes/ It loads the first three images on page load on my almost full hd viewport.

    If you want to change that, you could try to decrease the lazySizesConfig.expand value (described here: https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md#js-api).

    Thread Starter dem0n

    (@dem0n)

    Hmm I added 6 more images and all of them display lazyloaded from the start aswell. So it’s not limited to the first three ??

    Just want to say I really appreciate you taking to time to look at this.

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    No problem, happy to help ??

    With the three photos I meant the demo of lazysizes (there is no fixed rule to load only the first three or so) – in your case it may be a CSS problem or something similar. I have a page where a gallery with many photo thumbnails is loaded on page load, and I have no idea why (it works great for other photos in the blog view it cetera)…

    Could you bring the site live temporarily, so I can take a look at it? You can email me the URL, if you do not want to post it here (you can find my email address on the site linked in my forum profile).

    Thread Starter dem0n

    (@dem0n)

    Wish I could. Tried uploading but it’s just not at that stage yet. Getting nothing but errors. I’ll have to come back to this later when I’ve had time to prepare it. Again, thanks for the help though. I’ll disable the plugin for now and continue working on the rest.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Doesn’t lazy load images’ is closed to new replies.