Section not loading correctly
I'm unsure on how to describe this situation so I'll try to the best of my abilities I'll send a screenshot below. (Explanation: Basically when I reload my website and scroll down the "My Work" portion doesn't load fast and requires the user to scroll down fully to the section for it to load. What can be causing this? The rest of the page loads perfectly BUT some times it does become laggy I've never had to deal with issue before it started two days ago.
18 Replies
Incorrect Loading till user scrolls
Correct load after user scroll
Arman Markaryan
Description of your website
^ That's a link to my portfolio through GitHub as I still haven't managed to make images always load.
Images of 1.3 - 4.6MB? Could that be?
most likely, what could I do for this?
Use lorem picsum. 😄
Why have a 4096x4096 png for small img, which is not even visible? This is way more important than BEM or accessibility for 1% of impaird visitors.
As much as I want to use Lorem Picsum I can't find specific images
I was being ironic. Optimize the images. Let none of them be over 40kb.
Alright, time to find an optimizer thingy
you can try tinyPNG jpeg to webp
You only want to use these placeholder sites for demos and when you need a placeholder like posting an example codepen. You don't want to link out to them for specific images that will be permanent on your project. Make sure you're hosting those yourself somewhere and then referencing them via a link or adding them to your project files and referencing via a path.
If you are picky about what images show on your demo, you can reference a specific ID when linking through unsplash (my go to for placeholder images) but most of the time I only get as specific as the "category" e.g. landscape or city etc.
<img src="https://source.unsplash.com/300x300/?beach" alt="">
Also if you have your specific images, have optimized them and have them in your github repo that counts as hosting and you can link to those images in your codepen so you're using the exact images in your codepen example that you have in your project
Also make sure if you're using images as backgrounds that you also have a bg colour as a fallback for exactly this issue: if an image fails to load users will still be able to see the text on topVery smart (Ima try that now lol)
I figured out the img issue!
@clevermissfox - Appreciate all yourhelp regarding the img hosting!
Yay!
: D
Appreciate all the help Clever! couldn't have done it without your ideas
What was the cause?