We even tried to add the class via JQuery, however that didn’t work due to loading issues. WP-Rocket allows users to exclude images from LazyLoad by img class ( details here), however, there is currently no way to (in Divi at least) to add a class DIRECTLY to the image – the class gets added to the parent Div, which doesn’t help. Hopefully this will save you time if you don’t want to use any of the above. If you’ve been banging your head against a wall (like we have), here’s a list of the other fixes we tried to no avail. In the event you’re not using WP-Rocket, most other LazyLoad plugins or JQuery can also be customized, so speak to your plugin provider or developer about this issue if that is the case.Īs a quick background, this is the first actual fix we’ve seen online to this inherent problem across the internet. While this will again solve the Scrolling issue, the trade-off here is that images will appear to “snap” into place, because they will load when they come on the screen.Īgain this is something you’ll have to figure out for yourself and your website needs, as visually it’s not ideal. This means that essentially images won’t try to load until they’re on the screen. In this example the threshold is set to 0px: However you can adjust this threshold with the following. Solution 3 – Adjust the WP-Rocket LazyLoad Threshold in your Functions.phpĪssuming you’re using WP-Rocket’s LazyLoad feature, you can edit your child theme’s functions.php file, you can add this small snippet of code to change the LazyLoad Threshold ( read more on WP-Rocket).īy default, WP-Rocket LazyLoad loads images that are within 300px of the viewport (browser window). And again, if you have already tried, or can’t implement that, I’m assuming that’s why you’re here. There are a few ways around this, like defining the image dimensions in the image properties, however with most modern WordPress themes and responsive web design, this is not always the case, at least not in the Divi Theme. Once you start scrolling, lazy-loaded images start to appear, adding to the document’s overall height, and those elements your browser “knew” the positions of before get pushed further down the page.”Įven per WP-Rocket’s own advice, the only way around this is to disable LazyLoading on the post you want to use the anchor links. So the positions of elements that the browser has calculated upon page load are skewed. However, with LazyLoad enabled, images outside of the initial viewport don’t get loaded directly. Once the page has fully loaded, the browser “knows” the position of every scroll target, so it can scroll to that exact position once you click a menu link. “Scroll targets are calculated upon page load by the browser. Due to the nature of how LazyLoading works, by definition images won’t load until they’re about to come on the screen as users scroll down the page. However a consistent issue across the web relates to mixing LazyLoading with internal anchor links. LazyLoad and Anchor Link Scrolling Conflict Similarly, I’m assuming you already have Anchor scrolling navigation links in action on your site, or you wouldn’t be reading this. ![]() ![]() This can be used for one-page websites and landing pages, or just as a great UX feature to help your website visitors navigate your site. ![]() About Anchor Smooth Scroll navigation linksĪnchor scroll navigation links are another great standard feature that allow you to link to a specific section, div or element of a page by clicking a link or button and targeting an element’s #ID, and the browser will go to that point on the page. ![]() There are already a ton of great resources available about the benefits of LazyLoading ( WP-Rocket) ( Google) and I’m going to assume everyone reading this post is already aware of the benefits and has LazyLoading implemented on their site. About LazyLoadĪs anyone reading this post likely already aware, LazyLoading is a must for any website with lots of images, as it defers image loading until the images are about to enter the viewport of your browser, which greatly increases your site loading speed, which can have drasticly positive SEO implications (or negative if you don’t). Quick note – this post focuses on development for WordPress using the Divi Theme and WP-Rocket’s built in LazyLoad feature, however I’m sure much of the code or best practices would apply for website developers using LazyLoading and Anchor Link Smooth Scrolling across all themes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |