Preload images

Go down

Solved Preload images

Post by Kami-sama on December 13th 2017, 12:12 am

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");
   });
});


Last edited by Kami-sama on December 20th 2017, 8:05 pm; edited 1 time in total
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 14th 2017, 8:29 pm

UP Smile
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by Justice™ on December 15th 2017, 5:59 am

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.
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 4:57 pm

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?
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by Justice™ on December 15th 2017, 7:12 pm

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

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 7:14 pm

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?
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by SLGray on December 15th 2017, 7:40 pm

So you want a background image for a HTML page?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43665
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 7:46 pm

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?
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by SLGray on December 15th 2017, 7:51 pm

Please post a link to this page.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43665
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 8:04 pm

This would be the main page / login page.
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by Luffy on December 15th 2017, 9:53 pm

Hello,

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

Sent from Topic'it App
avatar
Luffy
Manager
Manager

Male Posts : 5553
Reputation : 616
Language : Greek, English
Location : Greece

https://help.forumotion.com

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 9:58 pm

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
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by Luffy on December 15th 2017, 10:00 pm

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

Sent from Topic'it App
avatar
Luffy
Manager
Manager

Male Posts : 5553
Reputation : 616
Language : Greek, English
Location : Greece

https://help.forumotion.com

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 10:05 pm

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

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by SLGray on December 15th 2017, 10:07 pm

Is this the background image?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43665
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 10:12 pm

Funny thing, this one always loads Very Happy
The one concerning me :

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

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by SLGray on December 15th 2017, 10:19 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43665
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Solved Re: Preload images

Post by Luffy on December 15th 2017, 10:19 pm

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="..." ?

avatar
Luffy
Manager
Manager

Male Posts : 5553
Reputation : 616
Language : Greek, English
Location : Greece

https://help.forumotion.com

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 15th 2017, 10:22 pm

@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 { ....
?
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by Justice™ on December 16th 2017, 4:37 pm

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.
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Preload images

Post by Kami-sama on December 17th 2017, 9:27 pm

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?
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Preload images

Post by Justice™ on December 18th 2017, 7:30 pm

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.
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Preload images

Post by APE on December 20th 2017, 8:25 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules



avatar
APE
Administrator
Administrator

Male Posts : 12458
Reputation : 1304
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum