Home Forums Trusted Defer off screen images

Tagged: ,

This topic contains 27 replies, has 2 voices, and was last updated by  Andy 3 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #6276

    paulmcf87
    Participant

    @andy

    I am looking to reopen my previous question related to image lazyload. I have raised the same concern on jetpacks support forum. I have tried all the fixes they mentioned with nothing working.

    I then tried using different themes to find that the lazyload option works with every theme that I tried. the only theme that it does not work with is your ‘Trusted’ theme.

    As mentioned in the previous question, it works on all pages with the exception of the product page.

    You had mentioned that my theme has been customized, and this is true, yes, however I have not customized the product page. and the customizations that I have done are mainly visual

    #6277

    Andy
    Keymaster

    Image lazyload does work with the Trusted theme, but you are running your own child theme which contains your own custom modifications.

    In the previous topic I attached an image which clearly shows the lazyload working correctly on the products page. Here is the image again with the relevant parts highlighted with a green outline to show the lazyloading working correctly:

    I understand that when you switch to various other themes, the lazyload works correctly.

    I’m guessing that you are not running your own custom themes as child themes of these other parent themes?

    Try switching themes to Trusted (not your custom child theme) and you will see that the image lazyload working as it should.

    Looking at the products page of your site I can see Javascript errors and HTML markup errors. See images below where errors are marked in red.

    Non of these errors are due to the Trusted theme. They are all from outside of the Trusted theme. Other plugins or custom code that has been added to the site or to the child theme is most likely causing these issues.

    I offered advice in the previous topic, but you seem to have ignored what I said and are determined to think that the Trusted theme is the cause of the image lazyload not working correctly.

    I really would strongly advise that you first fix these errors before trying to get things like caching and lazyload working. Until you do so, there is nothing that can be done to “fix” this issue as the Trusted theme is not the cause of these problems. A good way of building any site is to get the functionality working first, and then create the styling around that.

    #6279

    paulmcf87
    Participant

    @andy

    I switched to the trusted theme and am getting the same error. which clearly suggests that it is related to the parent theme as opposed to my customisations.

    I have disabled all the plugins and again, getting the same issue.

    I have tried taking a screenshot, however a weird situation in that when I try to take the screenshot using shutter, it seems to force the picture into the correct position. I tested on my child theme and it does the exact same.

    So, I will leave your Trusted Theme active overnight and you should be able to see for yourself

    #6282

    Andy
    Keymaster

    Thanks. Switching to Trusted (the parent theme) has got rid of all the HTML markup errors.

    You still have a Javascript error from the ‘Perfect WooCommerce Brands’ plugin.
    This is the error: TypeError: e(…).slick is not a function in /perfect-woocommerce-brands/assets/js/functions-frontend.min.js
    See image below.

    This error is preventing any Javascript which is loaded after the error from doing what it is supposed to do. This could be the cause of the WooCommerce gallery issues. It is certainly preventing the theme’s inbuilt JS functions from working correctly.

    #6283

    paulmcf87
    Participant

    @andy

    I can see what your saying.

    However, after deactivating perfect woocommerce brands, clearing the cache etc, I am still having the same issue.

    Again, I deactivated every plugin and left only jetpack and Woocommerce active, again I got the same issues.

    So using only Trusted (uncustomized) theme, woocommerce and jetpack for the lazyload, I am experiencing these issues.

    Also, the error did not have any effects on all the other themes which I tried of which I tried 4 others.

    #6285

    paulmcf87
    Participant

    Also, to add, the reason that I have been sticking with Jetpack is that with other Lazyload plugins,

    they all work on every page, bar the p[roduct page, however, jetpack looks to have a bit more success.

    The other lazyload plugins seem to have no effect at all on the product page at all

    I have activated a different lazyload plugin which you should be able to see works on all pages bar the products page if you have a wee look 🙂

    This one shows half of the main product image.

    • This reply was modified 3 months, 1 week ago by  paulmcf87.
    #6288

    paulmcf87
    Participant

    I’m getting really agitated now.

    I have been researching and trying different things all day and nothing works.

    I have tried Lazysizes Lazy load plugin there and does nothing on any page despite being compatible with the recent wordpress updates.

    I have tried a3 lazyload and BJ Lazyload. again, nothing on any pages.

    I have tried another lazyload plugin which has the exact same effect as Jetpack but rather than covering the full image shows half of the image.

    some of the lazyload plugins do not work with any theme so I’m removing them from the equation, however, most work fine with other themes. it is only with Trusted and my child theme that I am having issues.

    If I could, Id move to a different theme but I have put in too much work to move on and would prefer a fix of some sort

    #6289

    paulmcf87
    Participant

    If I had known Id have had so many issues with this theme I would have definitely looked elsewhere!

    This theme is clearly built for aesthetics rather than speed.

    The lazyload function does not seem to work regardless of the lazyload plugin that I chose. and as mentioned before in another question which no one could answer and again blamed on my child theme, when I minimise the css, Js, HTML, it breaks the site. The fromt tabs with recent, featured etc do not work properly, all of the products are displayed and clicking the chosen tab takes me down to that area rather than hiding the previous active tab and activating the newly chosen tab.

    also any colours which I change via the theme customiser are reverted back to default. to name a few.

    #6290

    Andy
    Keymaster

    Sorry I was looking at the products page (shop or product category page), not the single product page.

    Yes, I can see it not working properly on the single product page on your site.

    I cannot recreate the problem on our testing site. It works correctly, but as it’s clearly not working on your site, I have written a small piece of code that you use to exclude Jetpack lazyload from being used on the single product image gallery.

    To make use of this, add the following code to the functions.php file of a child theme:

    function trusted_exclude_lazyload_single_product() {
        if ( is_product() ) {
            return false;
        } else {
            return true;
        }
    }
    add_filter( 'lazyload_is_enabled', 'trusted_exclude_lazyload_single_product', 10, 3 );
    #6298

    paulmcf87
    Participant

    @andy,

    Thanks, I’ll give that a try. My concern is though, that essentially that is a paper over the cracks. I’m using lazyload to help speed and on the single product page, there will essentially be no help, although there are only 4 offscreen images so not a major issue, but I would rather it worked and I can’t understand why there would be issues on my end using purely the basic theme and not yours.

    The other thing, as I have touched on is minification of scripts.

    Each minification plugin seems to effect things differently, for example with WP Fastest Cache and fast Velocity Minify:

    In the back end – Appearance > Customize then selecting the colours tab I set my primary colour to ‘#125eaa.

    The primary colour gets reverted back to the theme default along with other subtle errors.

    With hummingbird which I am using. the widget at the bottom of the screen showing recently viewed products does not load, the widget area is there but its CSS value is – visibility:hidden; it does not update. again, tried on the trusted theme itself and get same issue

    A potentially minor issue but an issue none the less. and the main issue is that I cannot go to a different minification plugin as I have issues with them all

    • This reply was modified 3 months, 1 week ago by  paulmcf87.
    • This reply was modified 3 months, 1 week ago by  paulmcf87.
    #6301

    Andy
    Keymaster

    Re: the primary color being reverted to the theme default. Is that with your child theme as the active theme?

    I’d like to take a look at how your child theme is loading it’s stylesheets and it’s PHP functions etc.
    Would you mind zipping it and emailing it to me at andy at uxlthemes.com?

    #6302

    paulmcf87
    Participant

    Hi Andy, I have emailed over the customisations that I have made. all other customisations have been via plugins.

    Thanks for all your help thus far.

    #6303

    paulmcf87
    Participant

    I was checking products off of the front screen. what Ive also noticed is that with Hummingbirds asset Optimization active, when I view a category page, the products do not load onto the page.

    It would appear that the animation effect is not working. when I turn it off, the bottom widget works as does the product catelogue

    • This reply was modified 3 months, 1 week ago by  paulmcf87.
    #6306

    Andy
    Keymaster

    Thanks for sending me your child theme.

    I’ve had a quick look and noticed a couple of things which have the possibility of causing conflicts.

    Your functions.php file has a function to enqueue jQuery:

    function load_scripts() {
        wp_register_script( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js' );
        wp_enqueue_script( 'bootstrap' );
        wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' );
        wp_enqueue_script( 'jquery' );
    }

    This is not needed as you should make use of the version of jQuery that is built in to WordPress (currently version 1.12.4) to ensure no conflicts, and in any case themes should not load jQuery. Leave that to plugins or to WordPress core. It’s OK for themes to use their own scripts to work with jQuery but not load the jQuery file itself.

    The name of all php functions should be prefixed with something unique to lower the risk of conflicts with other functions from WP core or third-party plugins that could use a function with the same name.
    For example the load_scripts() function should be prefixed with something like ‘supplementgenie’ e.g. supplementgenie_load_scripts()

    Also, the header.php is loading jQuery version 1.11.2 directly:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    This is not a safe way to do this, and as you are already enqueueing jQuery I don’t understand why it would need to be loaded twice, even though it is not needed in either case and leaves your site open to all sorts of conflicts.

    I can also see the child theme is loading bootstrap files in both the load_scripts() function and again in the header.php file.
    This is not needed by the theme. I can only assume you are using bootstrap for some custom layouts in the child theme such as the footer. This is a lot of extra resources just to give you some responsive layout and/or styling which the parent theme already has.

    I would recommend reading this blog post about jQuery conflicts and WordPress themes for more information regarding the correct and incorrect use of jQuery and other resources.

    #6307

    paulmcf87
    Participant

    @andy

    I know that those should not be there.

    The reason I have theme there is because my main menu does not work without them there, it doesnt seem to use the built in JQuery from WordPress.

    Although, I have deleted them from both header.php and functions.php and cleared cache. It now seems to work at first, for 3-4 page views and then stops working again. not sure how that works. i think though its probably something at my end. will keep looking at it.

    Thanks a lot for your help

Viewing 15 posts - 1 through 15 (of 28 total)

The topic ‘Defer off screen images’ is closed to new replies.