I'm using parcelJs as build tool on a project. The project has blazy package for lazy loading for images.
My problem comes from the HTML, I have my images inside a src/img folder, and the src attribute works fine but the data-src doesn't. Is there any way to set this path correctly?
Working fine without lazy
<img src="./img/global-components/card/card-img-placeholder.png" alt="placeholder" class="g--card-02__media g--lazy-01">
Not working fine with lazy
<img data-src="./img/global-components/card/card-img-placeholder.png" alt="placeholder" class="g--card-02__media g--lazy-01">
Related
So every time I run lighthouse evaluation, it keeps telling me to "Defer offscreen images", now, what they recommend is to use their script and to set the images like this :
<img data-src="images/flower3.png" class="lazyload" alt="">
And this is what I have:
<picture>
<source sizes="(min-width:1025px) 25vw,(min-width:0px) 100vw"
srcset="https://thumbor.mypage/YiZprbZxOEdzieJbcj8ZnIKIrE4=/640x0/https%3A%2F%2Fmyimage.jpg 640w,...">
<img alt="" sizes="(min-width:1025px) 25vw,(min-width:0px) 100vw"
data-object-fit="cover"
class=" ls-is-cached lazyloaded"
data-src="https://thumbor.mypage/yoi8S4dSPBIU5ekNg6x7NvFFFPM=/320x0/https%3A%2F%2Fmyimage.jpg"
srcset="https://thumbor.mypage/YiZprbZxOEdzieJbcj8ZnIKIrE4=/640x0/https%3A%2F%2Fmyimage.jpg 640w,https://thumbor.mypage/qoSnHcwy_fuA8C2gJaKnxnCJ00A=/1024x0/https%3A%2F%2Fmyimage.jpg 1024w,...">
</picture>
So as you can see, I check the two things they ask for to match the right code: the lazyload class and the data-src attribute, maybe I'm missing something but for some reason, it only fails with a couple images. please help!
Short Answer
The second an image has a src or srcset attribute set it will load the image. You need to use a lazy load library that supports the <picture> element and make sure you haven't set the src or srcset on your <picture> elements.
Long Answer
You have misunderstood a key aspect here. The class="lazyload" and data-src="images/flower3.png" are part of a lazy load solution using JavaScript. You can't just copy these attributes without the related JavaScript code.
With their example (which I assume is this example of lazy loading as you did not link it in your question) there is a script you must include in order to make lazy loading work.
If you look at their example these <img> elements do not have a src attribute set and so they are invalid and will not load the image.
What the script does is look for <img> elements that have a class of lazyload and then look for the data-src attribute.
It then takes whatever is in the data-src attribute and adds that to the src attribute of the image once the image is within the viewport.
This then makes the image valid (as an <img> element must have a src attribute to be valid and actually load the image) and so it loads.
In your example you already have the src set via the srcset attribute in your HTML so the images are loaded instantly, the data-src does nothing in this case.
I am not sure whether the lazy loading library in that example works with <picture> elements (it appears to want you to use an <img> element with data attributes for media queries) so you may want to research a lazy loading library that works with the <picture> element now that you (hopefully) understand why your implementation is not working.
I'm trying to write a student web site for school using only html5 and css3. I want to showcase all of the websites I've made in an iFrame within my student web site using only local files but it's not loading anything. Here's the code I'm using:
<iframe src="yoga/ch7/index.html" name="frame"></iframe>
<p>
<span>Home</span>
<span>Classes</span>
<span>Schedule</span>
</p>
and this is what I'm seeing:
Screenshot
I have tried your code and it did work on my computer, please make sure the src="url" is correct.
copy and paste (yoga/ch7/index.html) it in your browser and make sure there's a result
I uploaded an image to my web server just like all the images are. I created it in Photoshop and exported to a .png. The image resides under The code is src="" But the browser shows that the image does not exist. I've set permissions to 0777, I've changed the image path, tried a different image in the same path to confirm it's reading the path right, and the image will just not show. You can view the link here, it will show nothing
EDIT: This is what the image is suppose to look like
EDIT: Removed links for privacy
You forgot " at the end.
It should be like this:
src="img/SccBridgeLogo.png"
OR
Try adding / at the beginning of the path, that should tell the browser to search from index directory.
src="/img/SccBridgeLogo.png"
Note this only works if you are running on a site, running from index.html in browser will return in
File:////
I had to use the picture tag for fallbacks and came across this issue at that point.
This use to work fine
<img src="images/netgraph-logo.png" alt="NetGraph Logo">
After adding the picture tag
<picture>
<source srcset="images/netbob-logo.webp" type="image/webp">
<source srcset="images/netbob-logo.png" type="image/png">
<img src="./images/netbob-logo.png" alt="NetBob Logo">
</picture>
In my case I was able to go down one folder from the root folder, therefore "./" preceding the rest of the url worked fine. You may need to back up several folders instead though, so be sure you are using the correct type of path.
I want to defer the loading of images in an HTML file until after all other assets have loaded or for a set amount of time. I would like to do this without JS.
I already use a deferred image loading technique that uses JS in our web app. However, a version of this app runs without JS and I'd like to have the same functionality if possible. I posted this in the hopes there may be some little known HTML5 attribute I can use for this. Any workaround are welcome.
Load priotity
If possible, it would be good to break up the image loading into blocks. I'm ok even if it's all just one block as well.
All HTML / CSS
Image block
Image block
Note : I've already looked into having lazy loading only for the JS app and having the image load right away for my pure HTML version (as described here), that's my fallback.
If you are targeting the Chrome browser, chromium has introduced a native image lazy loading so that means you don't need to install any further 3rd party library for this.
Using native image lazy loading, you should add loading attribute in the img html tag like this :
<img src="..." loading="lazy" width="200" height="200">
Also make sure that you have the latest version of Chrome browser installed.
For further details please go through this reference: https://web.dev/native-lazy-loading#image-loading
Hopefully it could be helpful.
I just switched the site from my working files to the server.
It worked fine when I uploaded it to my portfolio but once it was on the correct domain it stopped working. The image, instead of displaying, just shows up blank so I tried going to it's direct url.
Instead of it working it downloads the image instead of displaying it.
Here is the direct url: Direct url
My tag: <img src="images/login_header.svg" alt="Alright, lets start finding discounts!" />
My structure:
// root (BBCM)
//// images
////// login_header.svg
//// css
//// js
// end root
I have tried:
/images/url.svg
the direct url for the image
BBCM/images/url.svg
It works fine when it's on my portfolio but not on the correct domain.
Any ideas? When the image downloads it also displays the correct image so I am a bit lost here.
Is your server sending the .svg file down with the correct MIME type? It should be image/svg+xml.
See Nginx offers of downoload SVG instead of showing it for another question along the same lines.
Some browsers don't allow the IMG tag to support SVG files, you can however put it in an object with an image as fallback in case the browser fails to render.
<object data="image.svg" type="image/svg+xml">
<img src="fallbackimage.jpg" />
</object>
try use <object data="/images/login_header.svg" type="image/svg+xml"></object> instead