This demo shows the "Lazy load" features which only available in the pro version of the advanced iframe.
The usage of iframes do oft slow down the loading of pages a lot because more content needs to be loaded at the same time.
The lazy load feature can be configured in two ways:
- The iframe is loaded if they are visible
- The iframe is loaded after the parent page is loaded
you can enable the featue by adding enable_lazy_load="true" to the shortcode or by enabling this in the administration. This feature has 2 additional parameter:
- enable_lazy_load_threshold: With this parameter you can define how many pixels before the iframe would be visible it is loaded. So if you set this parameter to a value higher than the distance of the iframe to the visible bottom it is loaded right after the parent ready event is fired. For smaller values the iframe is loaded when the threshold is reached. Setting this value to 0 means that the iframe is loaded when it gets visible. I recommend to use the loading indicator like in the examples below.
- enable_lazy_load_fadetime: After the iframe is loaded you can fade in the content. The value is specified in ms. You need to check if this looks good with your content because fading can sometimes looks choppy.
IMPORTANT: This feature works with ALL other features of Advanced iFrame Pro! I have added this feature to some of the examples before also and reuse the examples here
- Example23: Lazy load when the iframe is in the viewport and fadein
- Example24: Lazy load when the iframe is loaded after the parent page is loaded
- Example 25: Lazy load with manual trigger and fadein
- The following examples also use lazy loading:
To make it easier to copy/paste the examples most examples are fully configured in the shortcode directly. I use use_shortcode_attributes_only="true" that none of the settings from the administration are used.
Example 23: Lazy load when the iframe is in the viewport and fadein
This example shows the example 16: Zoom example with 200% with lazy loading when the iframe comes into viewort and a fadein of 5 seconds.
The used shortcode is:
[advanced_iframe securitykey="your key" src="//www.mdempfle.de/examples/example3u4/example.html" use_shortcode_attributes_only="true" id="example3" height="1200" width="1600" show_part_of_iframe="true" show_part_of_iframe_x="460" show_part_of_iframe_y="400" show_part_of_iframe_width="500" show_part_of_iframe_height="260" show_part_of_iframe_next_viewports="460,180,800,720" show_part_of_iframe_next_viewports_loop="true" iframe_zoom="2" enable_lazy_load="true" enable_lazy_load_threshold="1000" enable_lazy_load_fadetime="5000"]
Example 24: Lazy load when the iframe is loaded after the parent page is loaded
This example shows Example 12: Special settings for IE 10 and IE 11 with lazy loading when the parent was loaded and no fadein.
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example12" browser="ie(10),ie(11)" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="113" show_part_of_iframe_width="166" show_part_of_iframe_height="136" show_part_of_iframe_next_viewports="573,243,205,128" enable_lazy_load="true" enable_lazy_load_threshold="5000" enable_lazy_load_fadetime="0"]
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" id="example12" browser="default" src="//www.mdempfle.de/examples/example3u4/example.html" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="213" show_part_of_iframe_width="166" show_part_of_iframe_height="136" show_part_of_iframe_next_viewports="573,243,205,128" enable_lazy_load="true" enable_lazy_load_threshold="5000" enable_lazy_load_fadetime="0"]
Example 25: Lazy load with manual trigger and fadein
This example is like example 23 but there is no automatic trigger and you have to do this manually by calling a Javascript function. The Javascript function is named aiLoadIframe_"your id"(); In this example it is aiLoadIframe_example25();
Please note that you cannot use the visual editor if you like to add Javascript to you page directly Or you need to use a plugin that does allow this!
Click here to load the iframe - manually added onclick="return aiLoadIframe_example25();"
Click here to load the iframe - added onclick automatically to id="button25"
The used shortcode is:
[advanced_iframe securitykey="your key" src="//www.mdempfle.de/examples/example3u4/example.html" use_shortcode_attributes_only="true" id="example25" height="1200" width="1600" show_part_of_iframe="true" show_part_of_iframe_x="460" show_part_of_iframe_y="400" show_part_of_iframe_width="500" show_part_of_iframe_height="260" show_part_of_iframe_next_viewports="460,180,800,720" show_part_of_iframe_next_viewports_loop="true" iframe_zoom="2" enable_lazy_load="true" enable_lazy_load_threshold="5000" enable_lazy_load_fadetime="5000" enable_lazy_load_manual="true" enable_lazy_load_manual_element="#button25"]
Example 25a with an image you have to click and then the iframe is loaded...
This is the shortcode and the div with the image you need to add. Simply add an image or a div with a background like I did:
<div id="coverimage" style="background-image: url('http://www.tinywebgallery.com/img/demo3_small.png'); width: 500px; height: 260px; z-index: 1; position: absolute; cursor:pointer;"></div>
[advanced_iframe src="//www.mdempfle.de/examples/example3u4/example.html" use_shortcode_attributes_only="true" id="example25a" height="1200" width="1600" show_part_of_iframe="true" show_part_of_iframe_x="460" show_part_of_iframe_y="400" show_part_of_iframe_width="500" show_part_of_iframe_height="260" style="z-index:2;position: absolute;background-color: white" iframe_zoom="2" enable_lazy_load="true" enable_lazy_load_threshold="5000" enable_lazy_load_manual="true" enable_lazy_load_manual_element="#coverimage"]