FAQ – Divi Advanced Lazy Load

  • “Divi – Advanced Lazy Load” – The most advanced LazyLoad Solution for the Divi Theme

    “Divi – Advanced Lazy Load” is an important step to optimize your website. Use it together with compression for CSS and JavaScript files, caching, CDN and server optimization for an optimal page load score.

  • "Divi – Advanced Lazy Load" - Divi Theme Options Panel Settings

    The following describes what the individual settings are for and what effects this has.

  • Setting: Enable Lazy Load

    Here you can turn “Divi – Advanced Lazy Load” on and off.

  • Setting: Ignore everything inside the first section

    Here you can set “Divi – Advanced Lazy Load” to ignore the content in the first section of a page. This makes sense, because in this case the content is displayed immediately on loading. However, under certain circumstances it may be useful to disable this option. For example, to achieve better results for the page load score. If you want to add more sections, you can find a filter under “PHP Hooks” where you can set this.

  • Setting: Threshold to the bottom of the viewport when loading the page

    The Threshold specifies at how many pixels distance to the bottom of the viewport the elements should be loaded by LazyLoad when scrolling. “Divi – Advanced Lazy Load” offers you the possibility to specify 2 different values. One during loading and then one that is used as soon as the user starts scrolling. This way you can make sure that no media below the viewport is loaded when the page starts, but change the behavior when the user moves further down the page. By default the value is set to -1, which is the boundary 1 pixel inside the viewport. If you want to include a certain area directly below the viewport on loading, set a positive value here, for example 100 for 100px below the viewport.

  • Setting: Threshold to the bottom of viewport when scrolling

    In addition to the previous setting, you can set the value for “Divi – Advanced Lazy Load” as soon as the user starts scrolling. At that moment, the value from the previous setting will be replaced with the value you set here. By default the value is set to 500 pixels.

  • Setting: Delay in loading images directly after page load

    As explained before, “Divi – Advanced Lazy Load” loads the media as soon as the threshold set above is reached during scrolling. With this setting here, the behavior can be changed fundamentally. If you set a positive value here, all media to be loaded via LazyLoad will be loaded after reaching the value set here. The value is to be considered in milliseconds. A value of 1000 stands for 1 second, a value of 2000 for 2 seconds and so on. The default value is -1.

  • Setting: Effect to fade in images (no background images)

    Here you can set the fade in effect with which the elements are to be loaded. Here you have the effect “Fade In”, “Show” and “Slide Down”. For more information you can look here: jQuery Effects

  • Setting: Effect time for images

    Here you can set how long the effect selected above should last. The values are in milliseconds, where 1000 stands for 1 second, 2000 for 2 seconds and so on. The value here does not apply to background elements.

  • Setting: Effect time for background images (just fadeIn)

    Here you can set how long the fade-in effect for background images and videos should last. The values are in milliseconds, where 1000 stands for 1 second, 2000 for 2 seconds and so on. For background elements only the “Fade In” effect is possible.

  • Setting: Selectors for images to load

    Here you can add the selectors to which LazyLoad will be applied. If you want to use other elements that are not listed here, you can add them here separated by commas. It is recommended to put a tag in front of the class “divilazy” and not just use “.divilazy” as selector. Otherwise every element must be examined with every tag, which means a poorer performance. Read more about selectors here: jQuery Selectors

  • Setting: CDN origin, e.g. cdn.mydomain.com

    If you use a CDN service, and you should, you can use CDN Origin here. Enter the CDN Origin here without the protocol, for example:  “cdn.mydomain.com” or “assets.mydomain.com”

  • Setting: Do not load background images for hidden elements

    With hidden elements, media is not loaded by default. This normally works very well, but can lead to complications with sliders etc. under certain circumstances. If you notice that images are not loaded on elements where there is a change, try disabling this setting.

  • Setting: Lazy Load for Iframe

    Enable this setting if you have iframes to load. This also applies to embedded Youtube and Vimeo videos.

  • Setting: Lazy Load for Vimeo

    Enable this setting additionally if you have Vimeo videos to load.

  • Setting: Lazy Load for Youtube

    Enable this setting additionally if you have Youtube videos to load.

  • Setting: Lazy Load for Picture

    Enable this setting additionally if you need to load pictures. Learn more about it: Picture Loader

  • Setting: Lazy Load for AV

    Enable this setting additionally if you need to load audio or video files. Learn more about it: Audio / Video Loader

  • Setting: Lazy Load for Ajax

    Enable this setting additionally if you need to load content via an Ajax call. Learn more about it: AJAX Loader

  • Setting: Lazy Load for Scripts

    Enable this setting additionally if you need to load scripts later. Learn more about it: JS / Script Loader

  • Setting: Lazy Load for Noop

    Enable this setting additionally if you need to simply test. Learn more about it: NOOP Loader

  • Setting: Reset all settings

    Here you can reset all settings as they were after you activated the plugin.

  • Setting: Delete all settings on uninstall

    Here you can set that all settings of “Divi – Advanced Lazy Load” are deleted from the database when uninstalling. This step cannot be undone if you do not have a backup of your database.

  • Tab Advanced > Section Visibility > Set attributes to the element tag

    Here you can define your own attributes for modules / rows / sections, which can be used to be controlled via JavaScript.

    Attributes and their values must be separated with a pipe ( | ). Different attribute and value pairs must be separated with two pipes ( || ). You can enter the corresponding classes and IDs in the section for classes and IDs.

    For example:
    data-loader|myLoader||data-settings|{“key1″:”value1″,”key2″:”value2”}

    becomes:
    data-loader=”myLoader” data-settings=”{“key1″:”value1″,”key2″:”value2″}”

    Then you can create your own lazy load instance in your JavaScript settings:

    // <div class="section whatever divilazy" data-loader="myLoader" data-settings="{"key1":"value1","key2":"value2"}"> ... </div>
    
    (function($,w){$(function(){
    
      const selector = 'div.lazyload'; // Or whatever
    
      const myOwnInstance = $( selector ).Lazy(
      {
    
          // Use your own loader
          myLoader: function( el )
          {
    
              const settings = el.data( 'settings' ); // {"key1":"value1","key2":"value2"}
    
              // Do whatever you want to do
    
          }, // end myLoader
    
      });
    
    });}(jQuery,window));
    

     

Macbook on a table with "Divi - Filterable Blog Module" opened

Get your copy at the Elegant Themes Marketplace

You can get “Divi – Advanced Lazy Load” on the Elegant Themes Marketplace. Buy it once and use it in all your projects. Get it now!

PHP Hooks

This action- and filter-hooks are available:

/**
 * Source output with cdn url | returns the source with changed url
 * @file wp-content/plugins/divi-advanced-lazyload/includes/abstract/filter.php
 * @return string | Source output with the cdn origin if a cdn origin is set
 *
 * @since   1.0.0
 */
add_filter( 'dall_cdn_origin_url', function( $host, $hostOrigin, $cdnOrigin )
{

    // implement whatever you need to make changes to $host

  return $host;

}, 10, 3 );

/**
 * Use not native lazyLoad | set to bool true
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/builder.php
 * @return bool | change to bool false if you want to change this behavior
 *
 * @since   1.0.0
 */
add_filter( 'dall_not_use_native_lazy', function( $bool )
{

    // return bool false if you want to use native lazyLoad

    return $bool;

}, 10, 1 );

/**
 * Add elements you want to ignore | set to array [ 'et_pb_section_0' ]
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/builder.php
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/general.php
 * @return array | add additional renderclasses to ignore
 *
 * @since   1.0.0
 */
add_filter( 'dall_elements_to_ignore', function( $sections )
{

    // add render classes you want to ignore

    return $sections;

}, 10, 1 );

/**
 * Add outer elements to be sure that the module counter works well
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/builder.php
 * @return array | add additional render-slugs to include
 *
 * @since   1.0.0
 */
add_filter( 'dall_outer_render_slugs', function( $outerArray )
{

    // Add outer render-slugs
    $outerArray[] = 'my_modules_render_slug';

    return $outerArray;

}, 10, 1 );

/**
 * Output if builder is enabled | returns the output from sections
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/builder.php
 * @return string | final output if you need to make some changes
 *
 * @since   1.0.0
 */
add_filter( 'dall_builder_output', function( $output )
{

    // here you can make changes to the final output

    return $output;

}, 10, 1 );

/**
 * Localization for the main JS file | array with the props
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/enqueue.php
 * @used wp-content/plugins/divi-advanced-lazyload/scripts/dall-init.js
 * @return array | props for localization
 *
 * @since   1.0.0
 */
add_filter( 'dall_script_options', function( $localize )
{

    // here you can make changes to the props array

    return $localize;

}, 10, 1 );

/**
 * Output if builder is not enabled | returns the output from ob_start buffer
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/general.php
 * @return string | final output if you need to make some changes
 *
 * @since   1.0.0
 */
add_filter( 'dall_general_output', function( $output )
{

    // here you can make changes to the final output
    // if you want to check $output or whatever else use print_r

    return $output;

}, 10, 1 );

/**
 * Do not lazyLoad the logo | set to bool true
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/general.php
 * @return bool | change to bool false if you want to change this behavior
 *
 * @since   1.0.0
 */
add_filter( 'dall_prepare_logo', function( $bool )
{

    // return bool false if you want to lazyLoad the logo

    return $bool;

}, 10, 1 );

/**
 * Check for PHP version 7 | set to bool true
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/initialize.php
 * @return bool | change to bool false if you want to change this behavior
 *
 * @since   1.0.0
 */
add_filter( 'dall_check_for_php_version', function( $bool )
{

    // return bool false if you don't want to check the PHP version

    return $bool;

}, 10, 1 );

/**
 * Check for theme name | set to bool true
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/initialize.php
 * @return bool | change to bool false if you want to change this behavior
 *
 * @since   1.0.0
 */
add_filter( 'dall_check_for_theme_name', function( $bool )
{

    // return bool false if you don't want to check the theme name

    return $bool;

}, 10, 1 );

/**
 * Check if you want to execute lazyLoad for this page | set to bool true
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/initialize.php
 * @return bool | change to bool false if you want to change this behavior
 *
 * @param bool $bool | set to true
 * @param int  $thisID | page id
 * @param bool $themeBuilder | if theme builder is enabled
 *
 * @since   1.0.0
 */
add_filter( 'dall_execute_lazy', function( $bool, $thisID, $themeBuilder )
{

    // return bool false if you don't want to execute lazyLoad for this page

    return $bool;

}, 10, 3 );

/**
 * Prepared media file | returns the prepared media file
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/filters/media.php
 * @return string | prepared media file if you need to make some changes
 *
 * @since   1.0.0
 */
add_filter( 'dall_return_media', function( $return )
{

    // here you can make changes to the final prepared media file

    return $return;

}, 10, 1 );

/**
 * Add noscript element to media file | set to bool true
 * @file wp-content/plugins/divi-advanced-lazyload/includes/controller/filters/media.php
 * @return bool | change to bool false if you want to change this behavior
 *
 * @since   1.0.0
 */
add_filter( 'dall_use_noscript_element', function( $bool )
{

    // return bool false if you don't want to add a noscript element

    return $bool;

}, 10, 1 );

/**
 * Settings options for activation hook and settings reset | array with the settings
 * @file wp-content/plugins/includes/trait/constants.php
 * @return array | props for settings
 *
 * @since   1.0.0
 */
add_filter( 'dall_settings_options', function( $settings )
{

    // here you can make changes to the settings array

    return $settings;

}, 10, 1 );

 

Troubleshooting

At the moment there are no known problems

As soon as that changes, we’ll write it in here.

Pre-Purchase Questions DALL

3 + 1 =

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

Cookie Preference

Please select an option. You can find more information about the consequences of your choice at Info.

Select an option to continue

Your selection was saved!

Info

Info

To continue, you must make a cookie selection. The various options and their meaning are explained below.

  • Accept all cookies (recommended):
    Tracking and analysis cookies. This helps us to better understand what you like about our site and to provide you with good and interesting content. Of course, this data is collected anonymously.
  • Allow only necessary cookies:
    Only the cookies that are necessary for the operation of the website.
  • Reject all cookies:
    No cookies except for those necessary for technical reasons are set.

You can change your cookie setting here anytime: FAQ - Divi Awesome Woo Products. FAQ - Divi Awesome Woo Products

Back