Design comparison
Solution retrospective
Any feedback is appreciated
Community feedback
- @ApplePieGiraffePosted almost 4 years ago
Hello there, rafet! 👋
Nice to see you complete another challenge! 😀 Nice work on this one! 🙌
A few things I'd like to suggest are,
- Preloading the slider images so that there is no delay between when the next slide is clicked (and a request is made for the image for the first time) and when the image actually appears on the screen.
- Adding
object-fit: cover
to the images so that they are clipped and do not distort when the size of the page changes.
Keep coding (and happy coding, too)! 😁
1@rafetbasturkPosted almost 4 years ago@ApplePieGiraffe
Hello! 👋
Thanks for your crucial suggests yet again. I changed my code accordingly. I used html preloading as below for each image. I hope it is the right way. If not can you please correct it?
<link rel="preload" as="image" href="./images/desktop-image-hero-1.jpg" type="image/jpg" crossorigin="anonymous">
Happy coding! 😁
1@ApplePieGiraffePosted almost 4 years ago@rafetbasturk
Hey, rafet! 👋
As far as I know, that method of preloading images in your HTML should work just fine. 😀 Just as a tip, another way you can preload images is to do it in your JS by creating a simple preload function and then calling it with the file paths of the images you want to preload, like so,
function preloadImg(url) { new Image().src = url; } preloadImg('./img/image-1.png'); preloadImg('./img/image-2.png'); preloadImg('./img/image-3.png');
Keep it up! 👍
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord