Homepage Full with Background dont display after defer load js Files

Hi,

i tried to use the booster plugin to defer load my js and css files – dont work. Not one file are moving from his place. I defined a custom wp-content directory as always in the config.php and im using a child theme. i also changed the name of the theme. Everthing works fine – but the plugin dont work. I followed the instruction of the booster plugin manual – no conflict with other plugin – i used it alone….

Then i removed the plugin, because i found following piece of code on stackoverflow to defer load the js files. Works fine:


if ( ! function_exists( 'add_defer_to_js' ) && ! is_admin() ) {
function add_defer_to_js( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) {
// not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}
add_filter( 'clean_url', 'add_defer_to_js', 11, 1 );
}


NOW MY PROBLEM and my Hope you can help me out. The only parts of my site, wich does not display correct anymore is the homepage full block AND the (same) Single Post Template (DEFAULT SITE POST TEMPLATE Style 8). This is the shortcode to reproduce it on the mainpage:

[td_block_homepage_full_1 category_id=”” category_ids=”2558″ post_ids=”” tag_slug=”” autors_id=”” installed_post_types=”” sort=””]

I compared the source of my site with the defer code and without – no changes.

QUESTION:

ANY IDEA HOW TO FIX THIS? Nny help would be appreciated

Thank you so much

• This topic was modified 10 years by newtag.
• This topic was modified 10 years by newtag.
• This topic was modified 10 years by newtag.
• This topic was modified 10 years by newtag.

Hi,

did you read my full question. Nothing moves to the bottom with the booster plugin. No conflicts. i decided to use the code i pasted in the 1. Q. If you set up a page with the short code and paste the function in to your function.php you can reproduce this issue in 2 minutes and tell me if you see anything on your site. This takes the same amount of time as answer my question with some other question i already mentioned in my 1. question.

thx

• This reply was modified 10 years by newtag.

Hi

This code add a new attribute for the files with .js extension: http://screencast.com/t/nGNIekHRJAXZ When post template 8 or homepage post block from Visual Composer are used on the page there is an additional js loaded on the page which is not loaded from main js file of the theme. The above code does not apply the defer attribute for all js code and this seems to cause conflicts.
You can read more about how this attribute works at this url: https://developers.google.com/speed/pagespeed/service/DeferJavaScript#description

Unfortunately I can’t provide a solution now as are needed some researches in order to identify how this code will work properly with the theme. If you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you.

Thanks for the message!

HI,

1.
I forgot to mention – that im – NOT – using the VC Plugin!!!

2. Firebug says, there is a error:

ReferenceError: jQuery is not defined
var html_jquery_obj = jQuery('html');

3. Part of my sourcecode where you can see the scripts in the footer area just above the script with the error:

<script type='text/javascript' defer="defer" src='http://justatestsiteforyouname.com/wp-includes/js/admin-bar.min.js'></script>
<script type='text/javascript' defer="defer" src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type='text/javascript' defer="defer" src='https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js'></script>
<script type='text/javascript' defer="defer" src='http:/justatestsiteforyouname.com/wp-content/themes/justatest/js/tagdiv_theme.js'></script>

<!-- JS generated by theme -->

<script>

		(function(){
			var html_jquery_obj = jQuery('html');

			if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {

				var path = 'http://justatestsiteforyouname.com/wp-content/themes/justatest-child/style.css';

				jQuery.get(path, function(data) {

					var str_split_separator = '#td_css_split_separator';
					var arr_splits = data.split(str_split_separator);
					var arr_length = arr_splits.length;

					if (arr_length > 1) {

						var dir_path = 'http://justatestsiteforyouname.com/wp-content/themes/justatest';
						var splited_css = '';

						for (var i = 0; i < arr_length; i++) {
							if (i > 0) {
								arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
							}
							//jQuery('head').append('<style>' + arr_splits[i] + '</style>');

							var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
								return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,'');
							});

							splited_css += "<style>" + formated_str + "</style>";
						}

						var td_theme_css = jQuery('link#td-theme-css');

						if (td_theme_css.length) {
							td_theme_css.after(splited_css);
						}
					}
				});
			}
		})();

	
	
</script>

4. When i exclude the defer loading of the jquery.min.js file – the error gone!

5. I think this can help http://stackoverflow.com/a/33205519 – please also look at the other answers.
But i dont know how to fix it.

6. If you can help me out, it would be awesome!

Thank you so much

• This reply was modified 10 years by newtag.
• This reply was modified 10 years by newtag.
• This reply was modified 10 years by newtag.

Hi

The defer attribute tell the browser to load a specific file only after the entire document is loaded. Because of this you can’t add this attribute to the file which load theme’s js because in some situations there appear conflicts. There is a specific order in which scripts must be executed on the page and by adding the defer attribute this order change. When you exclude defer attribute main theme’s js, from tagdiv_theme.js file it’s executed before others js scripts from the theme, that’s why the page is loaded fine. The page would be loaded fine using defer attribute if this js: http://screencast.com/t/ZAbBZkZEOe does not depend by main theme’s js. To achieve that are required lots of customizations and I can’t provide a solution now.
You can red more about this attribute actions here: https://varvy.com/pagespeed/defer-loading-javascript.html

Keep in mind that improving site’s page speed it’s a task which require a bit of coding and some knowledge in this regard. We can only guide you trough the required steps and we always recommend to follow the steps indicated in our documentation. Any other implementation for page speed involve custom work and this falls beyond the support can offer you. If you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you.

Thanks for the message!

Hi,

thx for the quick response- i will try it.

best