Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

I wish to report three issues while using the plugin and ask if these problems can be fixed:

1) The loader image is missing. Instead, it shows text "Loading" and a broken image icon. How can this be fixed? Can I manually link the loader image?

2) When I select to load only one element of the page, plugin still first loads the whole page and only then the selected element. Can this be fixed or at least mitigated somehow - e.g. by showing loader image longer to make sure it disappears only when the selected element is loaded?

3) What can be done to increase the speed of the loading? It is critically low in my mobile tests. Here is the sequence and timing when I click corresponding tab with the iframe:
- loader image - 4 sec
- image of the whole page - 3-4 sec
- empty screen - 10-15 sec
- overall only after 20-25 sec. from clicking the tab I see the selected part of the page loaded
Usually after 3-5 sec of waiting users get annoyed, and after 10 sec just leave the page. After 25 sec of waiting any visitor would certainly abandon the site. (this only happens with loading iframes, all other pages of the site are loaded just fine).

The described problems can be seen here:
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-28/

Shortcodes are here:

[tabby title="Electric Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="e1" frameborder="0" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/electric-actuators-all/" width="100%" height="800" use_shortcode_attributes_only="true" onload_resize="true" enable_lazy_load="true" enable_lazy_load_manual="auto" show_iframe_loader="true" onload_show_element_only=".table-act-e" iframe_hide_elements="tr.electromni, tr.a" scrolling="no" enable_responsive_iframe="true"]

[tabby title="Pneumatic Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="p1" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" width="100%" height="800" use_shortcode_attributes_only="true" onload_resize="true" enable_lazy_load="true" enable_lazy_load_manual="auto" show_iframe_loader="true" onload_show_element_only=".table-act" iframe_hide_elements="tr.pa" scrolling="no" enable_responsive_iframe="true"]


I think partial solution could be to force loading of the iframes in background right after the whole page has completely loaded, so that by the time user clicks on the tabs with iframe, it has already become loaded. Plus in general optimize plugin speed and performance.

Hope you could do something about, because these serious issues make it impossible to use your really great plugin.

1. There should be a loader icon.
http://ch1.2biz.ca/wp-content/plugins/advanced-iframe/img/loader.gif

Please check why it is not on your server.

2. Simply enable the feature that hides the iframe until loaded: hide_page_until_loaded="true"

3. The plugin does use the normal iframe in the html. So the speed of that depends on your browser and loading times. The plugin does already offer lazy load which does load the iframe when really needed. When you use the tabs you have the option of lazy load or with the ones where the iframes are preloaded in the background. But both have their advantage/disadvantage. You simply have to consider that you load 3 pages at once instead of 1.
So the real answer is - make the pages itself faster. Right now you load 1.2 MB with 142 Requests! You load 80 Javascript files! And 36 css files! On an optimized site this should be only very few... And on a mobile this is your real problem.

Best, Michael

Thank you.

Regarding the missing loader - this revealed another problem with the plugin. You use hardcoded path to the plugin location, which is not a good practice, because some security plugins may change the WP directory names or admins may customly change them.

It is much safer to use WP_PLUGIN_DIR instead of wpcontent/plugins
https://codex.wordpress.org/Determining_Plugin_and_Content_Directories

I think updating it according to WP codex will benefit your plugin.

Good point - i'll update this is in the next version. but WP_PLUGIN_DIR is the full path on your harddrive and should not be used by plugins. But i'll check the page

but what is with the icon?

Best, Michael

I just used a workaround (placed the image file to the place where the plugin looks for it) until you update the plugin to check for the actual plugin path.

o.k. but this is still hardcoded at some places. So you might cannot use other features as well.

Best, Michael

I manually changed the path in all files to actual location. This will be overwritten when I update plugin, but you said you would update this in the next version, so should be no worries.

Regarding the 3rd issue - load speed, to mitigate this I prefer using Example 17 when iframes are preloaded in the background. however it does not work.
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-17/

Only one iframe in one tab at a time is loaded *the one that is opened first). The tab that is open second doe snot load the iframe.

I think I use the wrong addressing of the tab here. Can you please check and correct this

[tabby title="Features"]
[tabby title="Technical"]
[tabby title="Electric Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="e1" frameborder="0" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/electric-actuators-all/" width="100%" height="20" use_shortcode_attributes_only="true" onload_resize="true" tab_hidden="#features" tab_visible="#electric-actuation" enable_responsive_iframe="true" onload_show_element_only=".table-act-e" iframe_hide_elements="tr.electromni, tr.a" scrolling="no" hide_page_until_loaded="true"]

[tabby title="Pneumatic Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="p1" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" width="100%" height="20" use_shortcode_attributes_only="true" onload_resize="true" tab_hidden="#features" tab_visible="#pneumatic-actuation" enable_responsive_iframe="true" onload_show_element_only=".table-act" iframe_hide_elements="tr.pa" scrolling="no" hide_page_until_loaded="true"]

[tabby title="Order"]
[tabbyending]

where did you get tab_hidden="#features" tab_visible="#pneumatic-actuation" from?

The visible tab is
#tablist1-panel1

the hidden ones are
#tablist1-panel3 for electric
and
#tablist1-panel4 for pneumatic

But you still have to optimize your pages. This is the main problem.

Best, Michael

Hi Michael,

OK, I see what the problem was - I originally used #tablist1-panel1, but since I already had another tabby tab list created earlier, I should have used #tablist2-panel1.

But in mobile it still does not hide the rows that marked as hidden. Neither Example 17 not Example 28:

Compare this page in desktop and in mobile
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-17/

In desktop it shows 3 rows in each tab, but in mobile it shows 5 rows in electric tab and 4 rows in pneumatic tab.

Same with Example 28:
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-28/

I don't know why but this code shows blank iframe pages on the desktop and full tables without hiding hidden raws in teh mobile version. What is wrong with these shortcodes? I think I did everything as you recommended.

http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-17/

[tabby title="Features"]
1
[tabby title="Technical"]
[tabby title="Electric Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="e1" frameborder="0" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/electric-actuators-all/" width="100%" height="100%" use_shortcode_attributes_only="true" onload_resize="true" tab_visible="#tablist2-panel1" tab_hidden="#tablist2-panel3" enable_responsive_iframe="true" onload_show_element_only=".table-act-e" iframe_hide_elements="tr.electromni, tr.a" scrolling="no" hide_page_until_loaded="true" show_iframe_loader="true"]

[tabby title="Pneumatic Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="p1" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" width="100%" height="100%" use_shortcode_attributes_only="true" onload_resize="true" tab_visible="#tablist2-panel1" tab_hidden="#tablist2-panel4" enable_responsive_iframe="true" onload_show_element_only=".table-act" iframe_hide_elements="tr.pa" scrolling="no" hide_page_until_loaded="true" show_iframe_loader="true"]

[tabby title="Order"]
[tabbyending]

Hi Michael,

Do you know how to make this code working?

Example 17 is quite complicated in the background as it moved the whole content out of the viewport and back and also has some timing. It seems your pages take too long that the measurement can be done properly.

So currently example 28 is the way to go.
One optimization could be to load the iframes and do the measurement at the time the iframe is shown the first time.
But this would be a custom solution.

Best, Michael