I have replaced lazy loading with native chrome loading="lazy" attribute but it seems to be not working. I am using Chrome 76 latest version.
I checked my page speed in https://developers.google.com/speed/pagespeed/insights and it still shows to Defer offscreen images!
Not sure what exactly I have missed?
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
I answered a related question some time ago:
After some research I found that I was missing something on my images. Images should include dimension attributes
As mentioned here: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
While it's not necessary, it is desired or expected to specify the dimension attributes on your images because without dimensions specified, layout shifts can occur. Resulting in unexpected behavior.
The browser needs to know the dimensions of your images to reserve sufficient space on a page for them.
Related question: https://stackoverflow.com/a/64330480/10757314
Related
I want to lazily load images from a gallery component (this is an example and does not represent its full size in production):
<div class="gallery-card">
<img src="../../images/1.jpg" loading="lazy">
<img src="../../images/2.jpg" loading="lazy">
<img src="../../images/3.jpg" loading="lazy">
<img src="../../images/4.jpg" loading="lazy">
<img src="../../images/5.jpg" loading="lazy">
<img src="../../images/6.jpg" loading="lazy">
</div>
Problem is that chrome has a very high threshold of (in my case) 2600 or so pixels, for the images to be considered lazy. I really just want to show 6 images (in a 3x2 grid) during initial load and upon scroll down, load in the next 6 images.
When I set the height of the gallery component manually, 2 of 6 images get loaded lazily:
<div class="gallery-card" style="height: 3000px">
<img src="../../images/1.jpg" loading="lazy">
<img src="../../images/2.jpg" loading="lazy">
<img src="../../images/3.jpg" loading="lazy">
<img src="../../images/4.jpg" loading="lazy">
<img src="../../images/5.jpg" loading="lazy">
<img src="../../images/6.jpg" loading="lazy">
</div>
but in a gallery of this size there have to be 100 or so images until the lazy load is triggered.
Is there a way to tell chrome (and other major browsers) to initially load a batch of 6 images and lazily load the next batch upon scroll down?
I'm having trouble understanding how to get images to display on this ASP.net project. I'm used to using tags, but am having trouble with the paths.
I have tried all of these solutions and none cause the image to display:
<img src="~/Images/mask.png" alt="Sample Photo" />
<img src="~/Images/mask.png" alt="Sample Photo" runat="server" />
<img src="../Images/mask.png" alt="Sample Photo" />
<img src="Images/mask.png" alt="Sample Photo" />
<img src="../Images/mask.png" alt="Sample Photo" />
The Images folder is in the project root. I'm using Bootstrap 4.0 and no other CSS.
If I set the src to a link (to Imgur, for example), the image displays. This makes me think it's an issue with the path, but I don't know what it could be. I think I've tried every variation that I came across when googling.
Any guidance would be really appreciated, and please let me know if I need to elaborate.
Place images in wwwroot folder.Details in documentation
I am using certain text in place of an icon or image which I dont want to read out to users using screen readers like JAWS. How can I prevent this? I had tried aria-hidden but it still reads out the content. Is there any effective way ONLY to prevent certain texts on screen from reading out?
There are multiple ways you can do this. If it is just an image, then any of the following will cause the image to disappear to a screen reader user:
<img src="whatever.ext" alt=""/>
<img src="whatever.ext" role="presentation" />
Of course, you can double-up too with this to make it abundantly clear what you mean
<img src="whatever.ext" role="presentation" alt="" />
These should also work in newer browsers that are strictly ARIA compliant but I have not tested them in all browsers
<img src="whatever.ext" aria-label="" />
<img src="whatever.ext" aria-hidden="true" />
<img src="whatever.ext" title="" />
I have an incoming HTML that contains img tags.
I need to force the images to be max the size of the viewport: iPhone or iPad.
Currently the text fits the screen nicely, but the images overflow the screen size.
I can force to [_wvContent setScalesPageToFit:YES];, but then the text is too small.
Any way to make the images the screen size?
Couple of incoming examples:
<img alt="Comparison " src="http://www.sample.com/wp-content/uploads/wp-post-thumbnail/dsa_k4iI.jpg" class="wppt_float_left" title="Comparison Photo" />
<img class="alignnone size-full wp-image-107864" alt="320d Comparison " src="http://www.sample.com/wp-content/uploads/590px4_2526_RT.jpg" width="590" height="329" title="20d Comparison" />
<img alt="" src="http://www.sample.com/wp-content/uploads/wp-post-thumbnail/dsa_ka.jpg" class="wppt_float_left" title="2013 BMW 320i: Track Tested by Edmunds Photo" />
<img class="alignnone size-medium wp-image-107859" alt="" src="http://www.sample.com/wp-content/uploads/201_-655x436.jpg" width="655" height="436" title="" />
Thanks for your help.
What you need to do is construct an objective-c string containing javascript that will run inside the webview to change the image sizes to fit inside the bounds CGRect of the web view. Then tell the web view to execute this javascript by calling stringByEvaluatingJavaScriptFromString:
<img src="#" alt="abc"/>
after above code rendered in browser the position of alt and src are changed like
<img alt="abc" src="#"/>
Is there is any way to fix these problem
"I want that every time src comes before others attributes!"