kisha Posted February 28, 2021 Share Posted February 28, 2021 Hi, well title is the question. I dont want to use window.addEventListener('load') because I dont want to wait for everything to be loaded, but just for the image which is in viewport when website is loaded...(image is set as css background) Is there any vanilla JS or greensock solution, or I need to use something like https://imagesloaded.desandro.com/? Link to comment Share on other sites More sharing options...
tailbreezy Posted February 28, 2021 Share Posted February 28, 2021 Hello kisha, I haven't used an event listener on a single image, but I do believe you can check by attaching the eventListener on the image itself. img.addEventListener( "load", () => { /* code */ }) 1 Link to comment Share on other sites More sharing options...
kisha Posted February 28, 2021 Author Share Posted February 28, 2021 13 minutes ago, tailbreezy said: Hello kisha, I haven't used an event listener on a single image, but I do believe you can check by attaching the eventListener on the image itself. img.addEventListener( "load", () => { /* code */ }) Hi and thanks for commenting. That seems like it's working if my image is in HTML, but I set it as background-image in CSS, and it doesn't work this way Link to comment Share on other sites More sharing options...
tailbreezy Posted February 28, 2021 Share Posted February 28, 2021 You can check when image is loaded and then simply add it as a background with HTMLelem.style.backgroundImage or simply toggle a class on load. 1 Link to comment Share on other sites More sharing options...
kisha Posted February 28, 2021 Author Share Posted February 28, 2021 1 hour ago, tailbreezy said: You can check when image is loaded and then simply add it as a background with HTMLelem.style.backgroundImage or simply toggle a class on load. I see, am I suppose to hide the image that is added with <img> tag with with display: none;? Because I just want to show it as background. Im guessing that's the trick? I'm not sure what you mean by toggling a class on load but I will look into it Link to comment Share on other sites More sharing options...
GreenSock Posted March 1, 2021 Share Posted March 1, 2021 5 hours ago, kisha said: I see, am I suppose to hide the image that is added with <img> tag with with display: none;? Because I just want to show it as background. Im guessing that's the trick? Yep, that sounds like a good option. Exactly. Link to comment Share on other sites More sharing options...
tailbreezy Posted March 1, 2021 Share Posted March 1, 2021 9 hours ago, kisha said: am I suppose to hide the image that is added with <img> tag Not necessarily. You can create new Image() that is not part of the DOM and attach onload and src on it. 2 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 1, 2021 Share Posted March 1, 2021 7 hours ago, tailbreezy said: You can create new Image() that is not part of the DOM and attach onload and src on it. This is common to do, especially when rendering things to Canvas/WebGL. But it can also be used for CSS background images. Link to comment Share on other sites More sharing options...
GreenSock Posted March 2, 2021 Share Posted March 2, 2021 21 hours ago, tailbreezy said: You can create new Image() that is not part of the DOM and attach onload and src on it. Yeah, that's what I meant. Ha - wasn't reading carefully. 👍 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 2, 2021 Share Posted March 2, 2021 On 2/28/2021 at 5:46 PM, kisha said: I see, am I suppose to hide the image that is added with <img> tag with with display: none;? Because I just want to show it as background. Im guessing that's the trick? Why not just use the img positioned as such that it replaces css background? That way you gain the benefit of potentially better seo and accessibility and responsive sizes. With object-fit, I find I rarely need to use background-image any more. 1 Link to comment Share on other sites More sharing options...
kisha Posted March 6, 2021 Author Share Posted March 6, 2021 On 3/1/2021 at 7:32 AM, tailbreezy said: Not necessarily. You can create new Image() that is not part of the DOM and attach onload and src on it. var myImage = new Image(); myImage.src = 'src/images/img.jpg'; myImage.addEventListener('load', function() { init() } I done this and it works. Thank you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now