Author Topic: Preload different image in each article using Javascript in head (Read 5981 times)

seadhna · « **on:** January 15, 2019, 14:42:16 »

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 · « **Reply #1 on:** January 15, 2019, 21:47:52 »

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 · « **Reply #2 on:** January 16, 2019, 20:18:16 »

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 · « **Reply #3 on:** January 17, 2019, 17:26:14 »

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 · « **Reply #4 on:** May 31, 2019, 13:43:41 »

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.

datahell · « **Reply #5 on:** June 03, 2019, 21:28:22 »

In my initial reply I just replied to your question, I didn't provided you a preloader (or lazy loading) script. In fact I am not sure what you want to do.
So, once more I will reply to your question exactly.

To execute something on page load use one of the following 2 methods:

Elxis 4.x and Elxis 5.x using jQuery
$eDoc->addDocReady('javascript to execute on page load');

Elxis 5.x without jQuery
$eDoc->addNativeDocReady('javascript to execute on page load');

Tip: You can search the internet for such scripts, I am sure you will find one.

webgift · « **Reply #6 on:** June 04, 2019, 08:23:15 »

I am sure as well!

bully · « **Reply #7 on:** June 10, 2019, 13:00:27 »

Unless the images are required on the start/index page, I personally prefer a pre-loading at the very end of the footer, so the pre-loading doesn't delay anything.

webgift · « **Reply #8 on:** June 10, 2019, 15:21:19 »

PRE-loading feature at the very end FOOTER section of your website... it's impossible
to happen! Browser read from the top till the end of any HTML document!
I don't think i have missed something about!

seadhna · « **Reply #9 on:** June 12, 2019, 14:01:32 »

Thanks datahell, yes, my query is outside of the scope of this forum I realise. I'm trying to tell the webpages to not show anything until the hero image is ready. It's not a preload function in the classic sense (used for background changes etc.) but to stop an "ugly loading"of the page. It's very easy to add a loading icon to a webpage to display until the entire page has loaded. However I'm finding it very difficult to figure out how to display a loading icon just until the hero image is ready (i.e. one specific asset). But this is not an Elxis issue obviously. Thanks for the instructions you have provided. Very useful.

Author Topic: Preload different image in each article using Javascript in head (Read 5981 times)

seadhna

Preload different image in each article using Javascript in head

datahell

Re: Preload different image in each article using Javascript in head

seadhna

Re: Preload different image in each article using Javascript in head

seadhna

Re: Preload different image in each article using Javascript in head

seadhna

Re: Preload different image in each article using Javascript in head

datahell

Re: Preload different image in each article using Javascript in head

webgift

Re: Preload different image in each article using Javascript in head

bully

Re: Preload different image in each article using Javascript in head

webgift

Re: Preload different image in each article using Javascript in head

seadhna

Re: Preload different image in each article using Javascript in head