Load issue and Title & image in thumbnails

arvanitidisk's Avatar

arvanitidisk

20 Jul, 2018 12:54 PM

Hello,
thank you for a great plugin. I have two questions:
1. Loading the homepage the slider section takes 2 secs to load displaying its background until it loads. How can I avoid this?
2. I've tried to implement this code to display both thumbnail and title but without any result:

<div class="rsContent">`
 {{image_tag}}
  <div class="rsTmb">
   <img src="{{thumbnail_url}}" />
     <h2>{{title}} </h2>
    </div>
  {{html}}
  {{animated_blocks}}
  {{#link_url}}
  <a class="rsLink" href="{{link_url}}">{{title}}</a>
  {{/link_url}}
</div>
The title is there but way below the thumbnails and hidden. Using CSS' margin property i can bring it to the desired position, but i suspect this isn't the correct way.

URL p.s. I used some custom CSS to stylize main slide title and gradient overlay. This code is injected within Elementor's CSS field of the corresponding element.

  1. Support Staff 1 Posted by Dmitry Semenov on 20 Jul, 2018 01:58 PM

    Dmitry Semenov's Avatar

    Hello,

    Loading the homepage the slider section takes 2 secs to load displaying its background until it loads. How can I avoid this?

    You have 50 JS files on the page from various plugins and page builders. Javascript executes after all of them are loaded. Since you enabled lazy-loading for slider images in Image Options, they start loading only after JS runs. To improve the situation, you may:

    1. I've tried to implement this code to display both thumbnail and title but without any result:

    Your code is correct, the title is hidden behind the thumbnail image, you need either to adjust size of thumbnail area, or style title so it appears on top, e.g.:

    .rsTmb h2 {
      position: absolute;
      left: 0;
      top: 0;
    }
    
  2. 2 Posted by arvanitidisk on 20 Jul, 2018 04:10 PM

    arvanitidisk's Avatar

    Thanks Dmitry,
    The CSS trick worked just fine. The Lazy load didn’t as it still takes time to load. Maybe I’ll check the JS if I can reduce them (at least on the homepage). Is there any way to load the slider’s script sooner?

    Thank you
    Kostas Arvanitidis

    ________________________________

  3. Support Staff 3 Posted by Dmitry Semenov on 21 Jul, 2018 04:31 AM

    Dmitry Semenov's Avatar

    Be careful with disabling lazy-loading entirely if you have many large images.

    You can make the first slide appear even without JS, but you'll need to pre-style it, for example:

    .royalSlider > .rsContent:first-child {
      visibility: visible;
    }
    .royalSlider > .rsContent:first-child img {
      visibility: visible;
      width: 100%;   
      height: 100%;
      object-fit: cover;
      padding-bottom: 125px;
    }
    
  4. 4 Posted by arvanitidisk on 30 Jul, 2018 11:07 AM

    arvanitidisk's Avatar

    Hi Dmitry,
    I've tried your suggestion to disable lazy loading, but without any success. Could you please guide me how can the slider load fast and prior to other homepage content? I don't want to display a blank background until the slider loads.

    Thank you,
    Kostas Arvanitidis

    ________________________________

  5. Support Staff 5 Posted by Dmitry Semenov on 30 Jul, 2018 02:15 PM

    Dmitry Semenov's Avatar

    I've tried your suggestion to disable lazy loading, but without any success

    Please elaborate what exactly was the issue.

    Could you please guide me how can the slider load fast and prior to other homepage content?

    Slider loads as fast as your page allows, optimize size and amount of other scripts that you load on the page.

  6. 6 Posted by arvanitidisk on 31 Jul, 2018 04:25 AM

    arvanitidisk's Avatar

    Hello Dmitry,
    I’m referring to this site www.el.gr<http://www.el.gr>
    As we discussed in earlier mails there are quite a few JS to be loaded prior to the RS. Is there any way to give priority to RS script to prevent showing a blank frame until it loads? It’s on the top of the page so it’d be best to load as soon as possible, ideally first.

    Thank you

    ________________________________

  7. Support Staff 7 Posted by Dmitry Semenov on 31 Jul, 2018 04:36 AM

    Dmitry Semenov's Avatar

    There is no option to set a priority of specific script file. You can try using plugins like https://ru.wordpress.org/plugins/async-javascript/ that allow adding defer attribute to scripts, which delays their execution.

    But as I posted earlier, in your case the most efficient way would be to style the first slide via CSS. So it's available before any JS is executed.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac