lazyloading images - noscript fallback code - javascript

I'm loading images on my site using js library jquery lazyload2, to display images I use the code below:
<img class="lazyload img-fluid" src="{{$product->getEncodedThumb()}}" data-src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">
Everything works fine so far, but I need to make the version of my site for users who don't have javascript enabled, how would I approach this? I could just replace all src tags on lazyloaded images with high quality images, but it would completely miss the point, as it would always download high quality images without lazyloading, how should I redesign my structure to allow for javascript lazyloading & noscript standard loading? Do I need to create completely different layout for noscript users?

You can use the new built-in lazy loading in HTML
Just with adding loading="lazy" attribute to your
like that:
<img src="https://test.photos/300.jpg" loading="lazy" />
Here you can see browser support:
https://caniuse.com/#feat=loading-lazy-attr

Usually img tag is followed by noscript tag with embedded original image, i.e.
/* hide lazyload images for disabled js */
.lazyload-hidden {
display: none;
}
<img class="lazyload lazyload-hidden img-fluid"
src="{{$product->getEncodedThumb()}}"
data-src="{{asset($product->getMainImage())}}"
alt="{{$product->name}}">
<noscript>
<img class="img-fluid" src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">
</noscript>
// show lazyload images
$('img[data-src]').removeClass('lazyload-hidden');

Related

How to change the lazy loading property from woocommerce?

My website is too long to charge, and apparently, it's caused by image lazy-loading. When I inspect the element (the image on the front page), I get :
<img width="300" height="300" src="https://miro-labo.com/wp-content/uploads/2022/08/Capture-decran-2022-08-19-131727-300x300.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://miro-labo.com/wp-content/uploads/2022/08/Capture-decran-2022-08-19-131727-300x300.png 300w, https://miro-labo.com/wp-content/uploads/2022/08/Capture-decran-2022-08-19-131727-150x150.png 150w, https://miro-labo.com/wp-content/uploads/2022/08/Capture-decran-2022-08-19-131727-100x100.png 100w" sizes="(max-width: 300px) 100vw, 300px">
What file (PHP or js?) do I need to edit to remove the loading="lazy"?
I am a little new to coding so please forgive my lack of knowledge ;)
You can put add_filter( 'wp_lazy_loading_enabled', '__return_false' ); in your theme's functions.php file Or can use any available plugin for Disable Lazy Loading and if you're using Jetpack or any other optimization or Cache plugin that enable lazy loading then you can turn off lazy load settings on those plugin options.

How can I disable third-party cookies for <img> tags?

Is there a solution to disable cookies for images loaded from third-party domains using HTML5 or JavaScript techniques?
I'm looking for something similar to sandbox attribute for <iframe> tag, referrerpolicy or crossorigin attributes for <img> tag.
Note: This workaround does not work for:
Firefox 68
Safari 12.1.2
After several days of challenge with this issue, I can confirm this can not be done using the <img> tag and any currently available techniques.
The right way is to use cookieless proxy server for images like Google does, but this is too resource intensive for us at this moment.
Acceptable workaround:
To disable cookie replace <img> with <iframe sandbox>;
To display image inside <iframe> use Data URI with inline CSS;
To emulate <img> tag sizing behavior use CSS background-size: cover which scales the image, this allows to set width and height to the <iframe> which applies to the inner image;
Use ARIA attributes to specify role="img" and aria-label as alt replacement.
Example:
<img width="100" height="75" alt="About company"
src="https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png" />
<iframe width="100" height="75" aria-label="About company" role="img"
frameborder="0" sandbox
src="data:text/html,<style>body{background:url('https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png') center/cover no-repeat;padding:0;margin:0;overflow:hidden}</style>"></iframe>
This won't be an option in most cases, but if the third-party image is being served with an Access-Control-Allow-Origin header that includes * or your host, it is possible to use the crossorigin="anonymous" attribute to disable cookies. In these cases, you should probably also include referrerpolicy="no-referrer" for greater privacy.
<img
src="https://graph.facebook.com/officialstackoverflow/picture"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
Most websites will not set this header, and you'll need to find an alternative. But some do, such as Facebook's API, and this is the simplest solution for those cases.
This is not an ideal solution, but you may be able to use an iframe to load the image, and then use CSS trickery to mask the iframe.
<iframe class="img-frame" sandbox src="https://www.google.com/favicon.ico" />
Otherwise I don't know of a pure HTML way of removing the cookies. I don't believe you can alter an iframes cookies from the parent using JavaScript, if the CORS policy from iframe prevents it.
I cannot really confirm that the code below does what you wish (because I have so much tracking protection stuff in my browsers, on my machine and on my network...) But just to add another option: Have you already tried to load the images via JavaScript?
<html>
<script>
document.addEventListener('DOMContentLoaded', function () {
var eArr = document.getElementsByTagName('img'), e;
for (e of eArr) {
if (e.hasAttribute('data-src')) {
e.src = e.getAttribute('data-src');
}
}
});
</script>
<body>
<img src="" data-src="https://www.google.com/favicon.ico" alt="">
</body>
</html>

Lazy loader suddenly stopped working. Images not showing at all

I've been using the same lazy loading script for years and after checking out my blog today, it's suddenly not working, no images are showing at all. I know it's the script because if I just put a basic image tag in, it works fine.
Honestly, the JS file is a mess as most of it is minified and I can't pick out just the lazyloader script. JS file is situated at:
https://helloarchie-helloarchie.netdna-ssl.com/themes/tootsweet/js/cbpHorizontalSlideOutMenu.min.js
Example URL where images should display (All images at top ARE working, but nothing underneath 'Headers-' etc. near bottom of page, because those are set to lazyload): https://helloarchie.co/design/
Here's the HTML I've always used to display image:
<img class="one img-responsive" alt="" data-src="https://helloarchie-helloarchie.netdna-ssl.com/img/rapeseed-field/family-two-young-brothers- yellow-seed-field-photoshoot-bobochoses-filemonkid-mum-nan-play-flowers- jump6.jpg" src="https://helloarchie-helloarchie.netdna-ssl.com/img/grey.gif" />
<noscript><img class="image-asset" src="https://helloarchie-helloarchie.netdna-ssl.com/img/rapeseed-field/family-two-young-brothers-yellow-seed-field-photoshoot-bobochoses-filemonkid-mum-nan-play-flowers-jump6.jpg" alt=""></noscript>
It's a total nightmare as I have thousands of images on my blog and I'd have to manually configure each one if I can't get this working. Can anyone help?

removing border around an <img> tag and jQuery lazy loading

I have the following html:
<div class="compPhoto compPhoto3">
<img class="lazy" src="" alt="" data-original="http://distilleryimage4.s3.amazonaws.com/c77631323e0411e394d322000a1f8c09_8.jpg" width="289" ;="" height="289">
</div>
I am actually using jQuery lazy load to load the images, however in the src tag I decided not to use an image, instead I just want to use a background. However then it gives me weird frame around the img:
I tried setting border: none, but it has no impact.
Any ideas on removing the border?
The grey border will be shown by certain browsers to denote that the image cannot be found. Because of this, you will not be able to remove it using CSS.
You shouldn't really be using an <img> tag like this. If you just want to use background-images, why not use a <div> or another block tag.
I disagree with Tim Ebenezer who wrote above. It is possible to hide the frame if the img tag is to add the style "border-style: none", but it is imperative that the src="" tag is at least empty, then the frame is hidden in Google Chrome, Firefox, EGDE, IE 10-11! But unfortunately it will not work for safari on MacOS and iOS.

When does the browser load images into the working memory?

I'm building a image-intensive web-page. I just popped in all the images and the site got really slow. Not just loading but also browsing etc.
Is there any good way to tell a browser that images are not necessary to load yet? For example in css:
display:none
or maybe instantiating the images with javascript somehow.
Currently all images are specified in the html, if possible I would like to keep to like that.
<img id="myID" src="about:blank" alt="" />
document.getElementById("myID").src="/image1.jpg";
I have to admit though, I have not used a blank image tag before, but If needed I have always appended an image to a container dynamically
document.getElementById("myDivID").appendChild('<img id="myID" src="image1.jpg" alt="" />');

Categories