Support > General
Preload different image in each article using Javascript in head
seadhna:
Hi there,
I have an Elxis site which has a large hero image at the top of every page. This image should preload before anything else for each page. At present, I have instructed each page to preload everything before displaying the page (using a loading icon). However the pages are very long and this can take over ten seconds. What I would really like to do is just make sure the initial hero image on each article loads first. However, how can I insert the javascript in the head so that the path will change for each article? This is the javascript:
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "https://www.example.org/images/hero/filename.jpg";
}
</script>
How can I include this javascript in an Elxis template so that the path changes according to the current path? I think it can be done by using '$link' somehow?
e.g. if I am on this page: https://www.example.org/article-1.html - the path to image for preload should be: https://www.example.org/images/hero/article-1.jpg
Is this possible using Elxis?
datahell:
I believe you understand that it is not good to use so big images and especially for decoration purposes. 10 seconds loading time is a lot.
To add raw javascript code in page head do it like below. You can write this code in a php file anywhere in Elxis (suggestion: in your template's index.php file).
$js = 'function preloader() { heavyImage = new Image(); heavyImage.src = \'https://www.example.org/images/hero/filename.jpg\'; }';
eFactory::getDocument()->addScript($js);
To change dynamically this image depending on the current article use "ELXIS_ARTID" php constant which equals to the current article ID.
Example:
$imgfile = 'default.jpg';
if (defined('ELXIS_ARTID')) {
if (file_exists(ELXIS_PATH.'/images/hero/article'.ELXIS_ARTID.'.jpg')) {
$imgfile = 'article'.ELXIS_ARTID.'.jpg';
}
}
$js = 'function preloader() { heavyImage = new Image(); heavyImage.src = \'https://www.example.org/images/hero/'.$imgfile.'\'; }';
eFactory::getDocument()->addScript($js);
Based on the above code you should name your default image "default.jpg" and all article related images as "articleX.jpg" where X is the article ID.
Note 1: Constant ELXIS_ARTID is set automatically by Elxis only on article pages. In rest pages it doesn't exists. So you must always check if the constant exists before using it.
Note 2: In category pages Elxis sets the constant "ELXIS_CATID" which, similar the to articles case, equals to the current category ID.
seadhna:
This is super helpful. Thanks you, I will try it. Yes, ten seconds is the load time for the very long page with many images, so if I implement this solution instead, I can remove the full-page preload because the only element that really needs to preload is the top image.
seadhna:
Hi datahell,
I've implemented this on the live site, and the image file name is changing correctly. However, the preload function doesn't seem to be having the desired effect. The page renders before the image has loaded, and I can see the image loading. Perhaps I'm misunderstanding what the 'preload' function is supposed to do? Please see here, when I force-refresh the page, I can see the top image loading after the page has already begun rendering. It's this ugly effect I am trying to hide: https://www.globalhungerindex.org/issues-in-focus/2018.html
Thanks for any ideas!
p.s. I'm not sure if it's important but I think I'm also supposed to include this in the body tag, so I did: <body onLoad="javascript:preloader()">
seadhna:
hi datahell,
i've been playing around with this in lots of ways but I can't get the image to preload.
Am I supposed to create the function / add some javascript somewhere else for "preloader" - script you gave below is appearing correctly in the head but it's not doing anything.
Navigation
[0] Message Index
[#] Next page
Go to full version