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.
Related
I migrated to WP 5.5 and as many, I have issues with pictures not showing.
I tried to apply all the solutions I found on the internet but none worked:
install "Enable jQuery Migrate Helper"
disable old plugins
disable Smush, caches & co.
I even downgraded the site back to 5.4.1
...
The images are still not showing. But it must be linked to the Lazy Load anyway...
You can see an example here:https://excel-malin.com/en/excel/test123/
This is the code it shows for the picture. It looks like the browser is still showing the 1 pixel lazy load "fake" picture and don't switch to the real picture.
<img class="alignleft size-full wp-image-6373" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://excel-malin.com/wp-content/uploads/2020/09/calendrier_2018_test.jpg" alt="" width="631" height="591" data-srcset="https://excel-malin.com/wp-content/uploads/2020/09/calendrier_2018_test.jpg 631w, https://excel-malin.com/wp-content/uploads/2020/09/calendrier_2018_test-300x281.jpg 300w" data-sizes="(max-width: 631px) 100vw, 631px">
Some more observations:
It's not a file permission issue: I checked & re-assigned everything (all folders in "Upload" are 755, all files 644)
If I try to show the image in the browser directly with it's URL, it's shown correctly
When I create new post, if not saved yet and I preview it, the image is there. Once it's published, the picture disappear.
I don't care for the Lazy Load, I can live with or without but I absolutely need to make the pictures visible...
Big thanks for any help!
I could finally find the reason:
it was caused by the "WP-Optimize - Clean, Compress, Cache" plugin...
If someone encounters the same issue, check if you have this plugin installed & deactivate it!
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');
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?
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.
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="" />');