Mobile first, SCSS and Vanilla Js

@thulanigamtee oh yes, I messed that one up, I forgot to check since I added a max-height on that section and that made the faq be on top. Thank you saying that one ^

@ApplePieGiraffe Hey, thanks APG for the compliments^

Also that preloading is pretty new to me, so really thank you for that one. Will implement it after I read and understand about it!

Also, question about it. For example if I have a website that don't have like that functionality, like the tabbed interface with the image loading or a gallery that uses of course images to display, just a website that uses bunch of images in different section. Would it also be wise to preload those images?

@pikamart

Great! 👍 Glad to help! 😀

I think the reason the images in the tabbed section of the page don't get displayed immediately when the other tabs are clicked is because they are only loaded when the src attribute of the <img> tag changes. Before that, the website doesn't "know" that those images exist.

I think it's a nice idea to preload images when you have a few of them that are used in a case like this. Preloading many images (or very large ones) might slow down your site, though.

Optimally, you could lazy-load images that are used elsewhere on a page but aren't seen when the page is first loaded. That means you'll set up your webpage to detect when the user scrolls to those sections containing those images and only load those images when the user reaches or gets near to those sections. (Here's an article from CSS Tricks on lazy-loading images if you'd like to learn more.) That way, your site will only load the resources it needs at the right times. 😉 Maybe that's what you're looking for!

Hope that helps. Let me know if you have any other questions! 🙂

@ApplePieGiraffe Thank you for making it clearer, I read some about the preloading but it just always states that they make ux lot smoother but doesn't really described "how" and you made it clear for me, by that the browser doesn't know the images until the src attribute is changed so like when preloading is used, it is like caching right, so yes really useful by that.

Thanks a lot APG!

@pikamart

👍😀

@ConradMcGrifter Thank youuuu^

@aUnicornDev Hey, you don't really need a hover state on a mobile preview. Since phone user just "touch" the screen thus not needing any cursor. Leaving the hover state on desktop preview is the right way^