Jump to content
Please Use CODE Tags

I want to have the imgs on my site start loading with the JS and such is there a way to do this?

upliftsleet1974
By upliftsleet1974
in Programming
 Share
Posted

Okay so not sure how to go about this is this done in the HTML or done in the Node.js side of things? 

 

If you do not get what I am asking here is a screen cap of the web page test for the site. Notice the .JPG files do not load till near the end is there a way to make them start sooner? 

 

Website: http://redx.co/

 

62f743bff6.png

CPU Ryzen 5 Asrock B350 Pro 4 / MSI RX580 Gaming / RAM 16 Gigs Corsair Vengeance 3000 / HDD 1TB Seagate Barracuda / SSD Samsung 840 120GB / 500GB Samsung SSD / Case Urban S31 / PSU EVGA G2 750w / Os Windows 10 / Keyboard Corsair K70 / Mouse Razer Naga 2013 (Won it from Linus!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Did not notice anything wrong with that website it loads instantly.  :lol:

Location: Kaunas, Lithuania, Europe, Earth, Solar System, Local Interstellar Cloud, Local Bubble, Gould Belt, Orion Arm, Milky Way, Milky Way subgroup, Local Group, Virgo Supercluster, Laniakea, Pisces–Cetus Supercluster Complex, Observable universe, Universe.

Spoiler

12700, B660M Mortar DDR4, 32GB 3200C16 Viper Steel, 2TB SN570, EVGA Supernova G6 850W, be quiet! 500FX, EVGA 3070Ti FTW3 Ultra.

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Did not notice anything wrong with that website it loads instantly.  :lol:

5 seconds. Just trying to make it faster for slow networks.

CPU Ryzen 5 Asrock B350 Pro 4 / MSI RX580 Gaming / RAM 16 Gigs Corsair Vengeance 3000 / HDD 1TB Seagate Barracuda / SSD Samsung 840 120GB / 500GB Samsung SSD / Case Urban S31 / PSU EVGA G2 750w / Os Windows 10 / Keyboard Corsair K70 / Mouse Razer Naga 2013 (Won it from Linus!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Well..... It's sort of difficult to really do anything that has a noticeable effect. Say you use the javascript Image() object... Well, that's just loading the images anyway, so the load times are pretty much the same because it still takes time to download the images. However, you can use this to preload images on other pages. The browser should cache them. But doing that will increase the initial load times... Not something you want as a showcase website.

 

So, what else could you do? Well, you could reduce the amount of images or run them through photoshop(maybe again) and "save for web" to give you a more web optimised(smaller) image. You might consider making the images smaller in general pixel wise and stretch them, but this can quickly look bad.

 

You can also make a page loading gif, that will display until all your content is loaded. This can be done by creating an overlay div with the usual overlay stuff:

top:0;

left:0;

z-index: like a million bazillion; 

etc.

 

You would place the loading gif as a background image to the overlay div and try and center it. It may also be nice to have some text that tells the user what's going on. Bear in mind, this loading gif has to be very very small because it also has to load, there's no point if everything else loads quicker. Then use <body onload="function()"> and some css transitions to change the loading div display to none causing a fade out or something. onload isn't really.... Working in IE8 for example, so naturally, Jquery makes this easier:

 

$(window).load(function() {
$("#div").fadeOut();
})
 
 
There might be something I'm missing or have forgotten though
 
 
EDIT: You can also pretty easily adapt the above to hide just the images until they're loaded, so you don't have to use a gif. But you would probably want a transition of sorts for the image to come in rather than just popping in, that's annoying 

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

 

Well..... It's sort of difficult to really do anything that has a noticeable effect. Say you use the javascript Image() object... Well, that's just loading the images anyway, so the load times are pretty much the same because it still takes time to download the images. However, you can use this to preload images on other pages. The browser should cache them. But doing that will increase the initial load times... Not something you want as a showcase website.

 

So, what else could you do? Well, you could reduce the amount of images or run them through photoshop(maybe again) and "save for web" to give you a more web optimised(smaller) image. You might consider making the images smaller in general pixel wise and stretch them, but this can quickly look bad.

 

You can also make a page loading gif, that will display until all your content is loaded. This can be done by creating an overlay div with the usual overlay stuff:

top:0;

left:0;

z-index: like a million bazillion; 

etc.

 

You would place the loading gif as a background image to the overlay div and try and center it. It may also be nice to have some text that tells the user what's going on. Bear in mind, this loading gif has to be very very small because it also has to load, there's no point if everything else loads quicker. Then use <body onload="function()"> and some css transitions to change the loading div display to none causing a fade out or something. onload isn't really.... Working in IE8 for example, so naturally, Jquery makes this easier:

 

$(window).load(function() {
$("#div").fadeOut();
})
 
 
There might be something I'm missing or have forgotten though

 

So would you say it is best to just leave it as is? Is it okay for it to take 5 secs for a webpage to load?

CPU Ryzen 5 Asrock B350 Pro 4 / MSI RX580 Gaming / RAM 16 Gigs Corsair Vengeance 3000 / HDD 1TB Seagate Barracuda / SSD Samsung 840 120GB / 500GB Samsung SSD / Case Urban S31 / PSU EVGA G2 750w / Os Windows 10 / Keyboard Corsair K70 / Mouse Razer Naga 2013 (Won it from Linus!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

So would you say it is best to just leave it as is? Is it okay for it to take 5 secs for a webpage to load?

Well, I always see the statistic about "if the page takes more than 3 seconds to load the retention of the user drops x percent" but I don't know how accurate that is. The thing with that particular website, it's very "vertical" sooooo, the user only really sees one thing being loaded so it's not that bad, I don't know if this is the same story with mobile though, I suspect not

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Well, I always see the statistic about "if the page takes more than 3 seconds to load the retention of the user drops x percent" but I don't know how accurate that is. The thing with that particular website, it's very "vertical" sooooo, the user only really sees one thing being loaded so it's not that bad, I don't know if this is the same story with mobile though, I suspect not

its the exact same on mobile. Its all a bootstrap site.

CPU Ryzen 5 Asrock B350 Pro 4 / MSI RX580 Gaming / RAM 16 Gigs Corsair Vengeance 3000 / HDD 1TB Seagate Barracuda / SSD Samsung 840 120GB / 500GB Samsung SSD / Case Urban S31 / PSU EVGA G2 750w / Os Windows 10 / Keyboard Corsair K70 / Mouse Razer Naga 2013 (Won it from Linus!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

So all in all I am not doing all that bad for someone new to coding xD. 

CPU Ryzen 5 Asrock B350 Pro 4 / MSI RX580 Gaming / RAM 16 Gigs Corsair Vengeance 3000 / HDD 1TB Seagate Barracuda / SSD Samsung 840 120GB / 500GB Samsung SSD / Case Urban S31 / PSU EVGA G2 750w / Os Windows 10 / Keyboard Corsair K70 / Mouse Razer Naga 2013 (Won it from Linus!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

How did I simply not know this existed O.o

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

How did I simply not know this existed O.o

That's exactly how I feel right now haha

CPU Ryzen 5 Asrock B350 Pro 4 / MSI RX580 Gaming / RAM 16 Gigs Corsair Vengeance 3000 / HDD 1TB Seagate Barracuda / SSD Samsung 840 120GB / 500GB Samsung SSD / Case Urban S31 / PSU EVGA G2 750w / Os Windows 10 / Keyboard Corsair K70 / Mouse Razer Naga 2013 (Won it from Linus!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I stumbled upon it when I was making my site a couple weeks ago :D

Well its getting added to my list of tools I use xD

CPU Ryzen 5 Asrock B350 Pro 4 / MSI RX580 Gaming / RAM 16 Gigs Corsair Vengeance 3000 / HDD 1TB Seagate Barracuda / SSD Samsung 840 120GB / 500GB Samsung SSD / Case Urban S31 / PSU EVGA G2 750w / Os Windows 10 / Keyboard Corsair K70 / Mouse Razer Naga 2013 (Won it from Linus!!

Link to comment
Share on other sites
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×