Preload images

by Kami-sama Tue 12 Dec 2017, 23:12

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hello!

I am using some scripts to change images on mouseover. I noticed, that first time hovering over the object there is slight lag on loading the image. Hovering second time - no lag.

Is there a way to preload images?
Also, is there a way to preload background image on an HTML page?

A sample of script I am using:

Code:: //Code by KamiSama $(document).ready(function(){ $(".o2pers1, .o2gg1, .o2sv1, .o2vn1, .o2kl1, .o2mm1, .o2hil1, .o2nez1, .o2go1, .o2zo1").hide(); $(".o2prof").mouseover( function() { $(".o2img ").css("background-image", "url('https://i.solidfiles.com/vZgeeX5W3d7aw.gif')"); $(".o2prof1").css("display", "block"); $(".o2prof").css("opacity", "1"); $(".o2pers1, .o2gg1, .o2sv1, .o2vn1, .o2kl1, .o2mm1, .o2hil1, .o2nez1, .o2go1, .o2zo1").hide(); $(".o2pers, .o2gg, .o2sv, .o2vn, .o2kl, .o2mm, .o2hil, .o2nez, .o2go, .o2zo").css("opacity", "0.8"); }); });

by Kami-sama Thu 14 Dec 2017, 19:29

by Guest Fri 15 Dec 2017, 04:59

Hi,

It can be done, but you'll need an img element inside your div. Basically, you'll change the src attribute of the img element on hover. The code would look like this:

Code:: document.addEventListener("DOMContentLoaded", function(){ var url=""; var image=new Image(); image.src=url; var hoverer=document.querySelector("selector here"); var hovered=document.querySelector("selector here"); hoverer.addEventListener("mouseover", function(){ hovered.parentElement.innerHTML=image; }) })

hoverer is the element you hover, and hovered should be the img element.

by Kami-sama Fri 15 Dec 2017, 15:57

So basically, I would have to change my layout and script for that to work

Currently I had one element. And on mouseover of different element an image would be applied to it.
Alright, I think I got it regarding elements.

What about HTML page background?
What's the best way to have it preloaded?

by Guest Fri 15 Dec 2017, 18:12

You can create a hidden element(display:none), put the image in it, then when mouseover-ing something, change the element to display:table.

by Kami-sama Fri 15 Dec 2017, 18:14

Yeah, I already did something similar Wink

so that's why I said element preload sorted.

Yet, what about HTML page background?
What's the best way to have it preloaded?

by **SLGray** Fri 15 Dec 2017, 18:40

So you want a background image for a HTML page?

by Kami-sama Fri 15 Dec 2017, 18:46

I have an HTML page. Background on it sometimes loads too slow. I cannot change background resolution, size, so maybe there is a way to preload it?

by **SLGray** Fri 15 Dec 2017, 18:51

Please post a link to this page.

by Kami-sama Fri 15 Dec 2017, 19:04

This would be the main page / login page.

by **TheCrow** Fri 15 Dec 2017, 20:53

Hello,

How do you have the background displayed? Did you add the background image via the Admin Panel??

Sent from Topic'it App

by Kami-sama Fri 15 Dec 2017, 20:58

I am not using forums header and footer on the page.
I added it via script for body { background-image:
Also tried to add as content for body:after

by **TheCrow** Fri 15 Dec 2017, 21:00

So you are using an image rotator script? Or it's only one image all the times?

Sent from Topic'it App

by Kami-sama Fri 15 Dec 2017, 21:05

It is one image all the time.
I tried body:after just because most people online suggested it for optimisation for mobile devices.

by **SLGray** Fri 15 Dec 2017, 21:07

Is this the background image?
Preload images Dk6R4NKYPzZp8

by Kami-sama Fri 15 Dec 2017, 21:12

Funny thing, this one always loads Very Happy

The one concerning me :

body { background-image: url("https://i.solidfiles.com/enXq6LBvp8pYj.jpg");

by **SLGray** Fri 15 Dec 2017, 21:19

When I inspected the page, I only saw the image I posted in the coding.

by **TheCrow** Fri 15 Dec 2017, 21:19

Since you are loading the image in a HTML page, have you tried adding it to the actual html line of code? For example body style="..." ?

by Kami-sama Fri 15 Dec 2017, 21:22

Luffy wrote:Since you are loading the image in a HTML page, have you tried adding it to the actual html line of code? For example body style="..." ?

Do you mean to add image in

Code:: <body style="...">

instead of having it in

Code:: <style> body { ....

?

by Guest Sat 16 Dec 2017, 15:37

Preloading the background image would actually make it slower.
If you don't preload:
1.Browser sends request to server
2.Servers sends data back
3.Browser downloads image and applies it
If you preload:
1.Browser sends request to server
2.Servers sends data back
3.DOM and CSS is parsed and the page is rendered without background image
4.JS downloads the image and applies it to the page
The preloading would actually be an afterload so to say

The only thing you could do is implementing cache. Unfortunately, you need access to a server for that.

by Kami-sama Sun 17 Dec 2017, 20:27

I see. That makes sense. Another option probably would be to switch image to a smaller pattern style I guess so it would load faster.

Question, does it make any difference in image loading time weather it's uploaded in forumotion or different image hosting website?

by Guest Mon 18 Dec 2017, 18:30

By uploading in forumotion you probably mean the service fm uses(servimg). The factors influencing image loading:
1.Server speed:if you can, the best for speed would be to use a CDN(Content Delivery Network). A CDN is a collection of servers across different continents. If a user from America connects, the server from America is used. If the user is from Europa, the server from Europa is used.
2.Internet speed. If the user has slow internet, the image will also load slow. You should use smaller images so that users with slow internet will have a better experience.
3.Cache. This is the most important thing for any website. You need server side access for this. Basically, with cache enabled, when the user requests the image for the first time, it is saved to his/her device. If the user requests the image again, the image will be loaded instantly from the device.
4.Compression. Normally, the server sends the content directly. With compression enabled, the server first compresses the image, than sends it to the browser. A compressed image can load 2-3 times faster than a normal one. You need server access to enable compression.
5.Javascript. If you have a lot of javascript or it's badly written, the browser is losing a lot of time parsing and executing it. When JS is being parsed and executed, CSS is not loaded. Is CSS is not loaded, the background image is also not going to be loaded. You should place Javascript just before closing the body tag to prevent this.
6.Image size. A huge image takes a lot of time to load, especially if the internet speed or the server is not that great.

So, my advice is:find a host that supports compression and cache and don't use big images.