Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1375151

    Hi,
    I was doing tests to my mobile version of webpage and I can see that everytime I run it it complains and find almost 300kb image being downloaded. It is fine for Desktop version (it is part of full-screen slider) however it shouldn’t download it on mobile. The responsive is configured to be hidden.

    Any ideas why and how to let phone to ignore this image and not download it when it’s not used?

    1. Here it is visible it downloaded it

    2. Here it is visible that it should not use it on mobile phone at all

    Same is visible in google pagespeed mobile version test (see url)

    Thanks

    #1375285

    I’ve dig into this further today and it seems it enabled on mobile “Inspect” even it is disabled in Responsive tab.
    Is this a bug or why this slider/image is being fetched/referenced in code when it is disabled in Responsive tab?

    <li style="background-position: center center; background-image: url(&quot;https://www.nebojsaarchitekta.sk/wp-content/uploads/2022/10/obyvacka-architekt-design-5.jpg&quot;); visibility: visible; opacity: 1; transition: none 0s ease 0s; transform: translateZ(0px);" data-img-url="https://www.nebojsaarchitekta.sk/wp-content/uploads/2022/10/obyvacka-architekt-design-5.jpg" class="avia-slideshow-slide av-la3o7zdp-7c7a12052fe9ac8d535f4a735eaf459c__0 av-single-slide slide-1 slide-odd next-active-slide active-slide"><div data-rel="slideshow-1" class="avia-slide-wrap "><div class="av-slideshow-caption av-la3o7zdp-7c7a12052fe9ac8d535f4a735eaf459c__0 caption_fullwidth caption_center"><div class="container caption_container"><div class="slideshow_caption"><div class="slideshow_inner_caption"><div class="slideshow_align_caption"><h2 class="avia-caption-title " itemprop="name">interiéry od návrhu až po realizáciu</h2><div class="avia-caption-content av_inherit_color" itemprop="description"><p>váš domov by mal rozprávať príbeh o tom, kto ste a súčasne byť zbierkou všetkého čo milujete</p>
    </div></div></div></div></div></div><div class="av-section-color-overlay" style="opacity: 0.1; "></div></div></li>
    #1375299

    Hi,

    Thank you for the inquiry.

    When using the visibility options, please note that the element is not actually removed from the document, but only hidden with css, so any related resource such as images will still be loaded in the page. Unfortunately, there is no option to completely remove (not just hide) the element on different screen sizes. It is possible with a script, but you will have to create this feature from scratch.

    Best regards,
    Ismael

    #1375305

    Thanks Ismael,
    Didn’t know this.

    Additional questions:
    1. Is it possible somehow possible patch this css code for mobile with different url (so it won’t download anything). The main thing I want to achieve is to force Enfold to not download that image (or download some different 1kb one) on mobile platform.
    I’ve tried something myself but was not able to adjust URLWITHIMAGE part of below code. It seems it is some element.style which I have no clue how to adjust using CSS.

    element.style {
        background-position: center center;
        background-image: url("URLWITHIMAGE"); 
        visibility: visible;
        opacity: 1;
        transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s;
        transform: translateZ(0px);
    }

    2. I also have different slider gallery on homepage for desktop which is hidden for mobile, but those images are not downloaded. Is it configured differently for that gallery?

    jfyi: As workaround I found a way to have separate page for mobile view where this component is not added. However I would like somehow 1. to apply.

    function redirect_mobile_devices() {
        if ( wp_is_mobile() && is_front_page() ) {
            wp_safe_redirect( get_site_url(). '/home-mobile', 301 );
            exit;
        }
    }
    add_action( 'wp', 'redirect_mobile_devices' );

    Thanks
    Jaro.

    #1375473

    Hi,

    Thank you for the update.

    1.) You cannot prevent the images from loading by overriding the original css because the previous css code will still continue to exist.

    2.) The gallery items are added as actual images using img tags while the images in the slider are rendered as background images using css. If you want to render the slider images using img tags, please use the Fullwidth Easy Slider instead of the Fullscreen Slider element.

    Glad to know that you’ve found a working solution. If you want to use a plugin instead, please check the link below.

    // https://wordpress.org/plugins/specific-content-for-mobile/

    Best regards,
    Ismael

    #1375498

    Thanks Ismael for closer view on this. I hate redirects as it slows stuff so still trying to figure this out.
    I found this old thread on forum from 2017. Do you think it could be applicable here?
    https://kriesi.at/support/topic/enfold-background-image-remove-on-mobile/

    The code part there suggests to add custom ID, adding function and then applying CSS. I expect some stuff to be outdated in script (f.e. .av-paralax)? I’ve also hit issue with using it “Uncaught ReferenceError: jQuery is not defined”

    function remove_bg(){
    ?>
    <script>
    jQuery(window).load(function(){ 
    	if (jQuery(window).width() < 768) {
    		jQuery("#unique-id").css("background-image", "");    
    	} 
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'remove_bg');

    + then css change

    @media only screen and (max-width: 480px) {
    #unique-id > .av-parallax {
        background-image: none !important;
    }}

    Just want to be super sure if something like this could work with minimum effort to adjust or I would need to figure this out somehow from scratch.
    Thanks

    #1375798

    Hi,
    Please try this javascript in your child theme functions.php, it will remove the fullscreen slider on your home page on mobile, it is added to your page head so it should be loaded before the slider image is called to be downloaded. If you have any plugins that defer javascript disable them because this will only work if it runs before the image is called.

    function pure_javascript_remove_slider_on_mobile() { ?>
      <script>
    const fullscreenSlider = document.querySelector("#top.home .avia-fullscreen-slider");
    const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    function removefullscreenSlider(width){
        if(width <= 480){
            fullscreenSlider.parentNode.removeChild(fullscreenSlider);
        }
    return
    }
    removefullscreenSlider(viewportWidth);
    </script>
      <?php
    }
    add_action('wp_head', 'pure_javascript_remove_slider_on_mobile');

    Best regards,
    Mike

    #1375904

    Thanks Mike,
    I’ve tried this code but no luck. At least seems to have no effect.
    When I checked the console output I’ve got following:

    (index):137 Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
        at removefullscreenSlider ((index):137:26)
        at (index):141:1

    Can you please check what might be causing this?
    I’m testing this on following page (private data)
    Thanks in advance

    #1375934

    Hi,
    The javascript was running before the slider was created in the DOM, so the error was that the slider was not found.
    This was because I originally loaded the script in the head add_action(‘wp_head’, , moving it to the footer corrects add_action(‘wp_footer’, this is the new script:

    function pure_javascript_remove_slider_on_mobile() { ?>
      <script>
    const fullscreenSlider = document.querySelector("#top.home .avia-fullscreen-slider");
    const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    function removefullscreenSlider(width){
        if(width <= 480){
            fullscreenSlider.parentNode.removeChild(fullscreenSlider);
        }
    return
    }
    removefullscreenSlider(viewportWidth);
    </script>
      <?php
    }
    add_action('wp_footer', 'pure_javascript_remove_slider_on_mobile');

    Please give this a try.

    Best regards,
    Mike

    #1376076

    Thanks a lot Mike for getting this resolved,
    This seems to work perfectly and no more complains about big image being downloaded on mobile phone. I’m sending some love for this :)
    Feel free to close this out.

    Jarol

    #1376087

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Hidden full screen slider image is downloaded on phone’ is closed to new replies.