Comments (5)
Hi, thanks for logging this.
Which browsers are you noticing that images within <noscript>
are loading? It's been my knowledge and experience that browsers don't evaluate the content within <noscript>
as HTML unless JavaScript is actually turned off. Additionally, I can verify in all browsers installed on my machine (Chrome, Firefox Developer Edition, Firefox Nightly, Edge, IE 11, Safari, and Safari Technical Preview) that image resources referenced within <noscript>
do not download when JavaScript is turned on through the network panel in each browser's dev tools.
Additionally, a CSS display
value of none
does not guarantee whether inline resources referenced from <img>
are downloaded. Using this Codepen example, I can verify that even though the stylesheet sets display: none;
for all img
elements, the referenced image still downloads in Chrome, Firefox (dev and nightly), Edge (17), Safari (stable and Technical Preview). That this is the case tells me that this is likely conforming behavior for browsers.
I would ask you check and verify in the network panel of your browser's dev tools that images within the <noscript>
elements are actually downloading when JavaScript is on.
from yall.js.
I understand your point about how browsers will not evaluate the content inside noscript element if javascript is turned ON. But for some reason its not working like that in my code.... until I just noticed that the code I had shared earlier is actually wrapped inside an 'a' element like below on my end. Would this have anything to do with the images inside noscript element being loaded? I am trying to show an image inside an 'a' link element. Does noscript element work differently inside 'a' element?
I guess I am asking if the noscript have to be the immediate child of body element for it to work properly? Seems like noscript can only go directly under body tag and not under any other div/a elements.
<a href="samplepage.html">
<img class="lazy sampleimage" data-src="image1.jpeg" src="PLACEHOLDER-IMAGE.png" alt="This is a image when browser can do js.">
<noscript>
<img src="image1.jpeg" class=" sampleimage" alt="This is image when browser cannot do js.">
</noscript>
</a>
I have since removed all the noscript tags from my code and it seems to be working fine.
Thanks a lot Malchata.
from yall.js.
It shouldn't matter where <noscript>
is placed. One thing I remember is that you use yall.js in an Angular single page app, so I wonder if some strange interaction is occurring there. Do you have a minimal reproducible test repo where this occurs?
from yall.js.
not really...
I went ahead and removed all the noscript items that were not direct children of body and it is working now. Thanks a lot for your help.
from yall.js.
OK. I'll go ahead and close this. If you decide you'd like to have me look at a test repo with this issue, just let me know in this issue, and I'll reassess. Thanks for being patient, and for your help. 😄
from yall.js.
Related Issues (20)
- 2.3.2 not working with IE11
- Missing files in the 3.1.5 npm install HOT 6
- yall doesn't seem to work on iOS HOT 3
- Google Page Speed still asking to defer offscreen images HOT 5
- Broken loop in yallApplyFn
- Images in slideshow not loading correctly in Safari
- Strange error in the latest 3.1.6 version HOT 2
- yall.js as a fallback for native loading="lazy" HOT 3
- 3.1.7 issue in IE11 (with polyfill) HOT 3
- Would you add extensions/libraries facilitating usage of this library? HOT 1
- Lazy loading <video> (autoplay/GIF-like behavior) HOT 1
- Picture element has its image loaded before the users scrolls to it. HOT 2
- Width / Height for <img> in test files
- how to disable on particular page
- Type error when dataset is undefined.
- Usage with Webpack & Babel, for supporting IE11 / not ES6 browsers? HOT 8
- Yall not working on modal window iframe. HOT 1
- Yall with background image css with loop
- Can't find this file ./dist/yall.mjs
- [Feature Request] Detect when video is no longer on screen and provide hook
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.