Slow performance of javascript in dynamic display:none by id

91
May 28, 2018, at 00:40 AM

I am using a script that reads the URL of the current page, checks if a specific string is present and then creates a cookie with expiration of one day. If cookie is present then I set display = none to four divs by id. The code is below and it is working. The problem is that it seems rather slow, in the way that I manage to see the div's for a little while before they dissapear.

I have tried both jquery for "hiding" the divs but also the "document.getElementById .style.display = 'none';"

<script type="text/javascript">
var myvariab1= window.location.href;
if( myvariab1.indexOf('thetextiamsearhing') >= 0){
var date = new Date;
date.setDate(date.getDate() + 1);
var mexpire = "; expires="+date;
final_cookie = "mycookie =" + myvariab1+mexpire +"; path=/";
document.cookie = final_cookie;
}
 if (document.cookie.indexOf('mycookie') > -1 ) {
$(document).ready(function(){
$('#myid1').hide();
$('#myid2').hide();
$('#myid3').hide();
$('#myid4').hide();
});
}
</script>

What can i do to make it faster? The script is placed right before </head> closes. The script is inside an ecommerce script, that uses jquery.

Answer 1

Instead of waiting for the document to be completely parsed to hide the elements in question, create or append to a style tag to keep the elements from ever being displayed in the first place. For example:

var myvariab1= window.location.href;
if( myvariab1.indexOf('thetextiamsearhing') >= 0){
  var date = new Date;
  date.setDate(date.getDate() + 1);
  var mexpire = "; expires="+date;
  final_cookie = "mycookie =" + myvariab1+mexpire +"; path=/";
  document.cookie = final_cookie;
}
if (document.cookie.indexOf('mycookie') > -1 ) {
  document.head.appendChild(document.createElement('style'))
    .textContent = `
      #myid1, #myid2, #myid3, #myid4 {
        display: none;
      }
    `;
}

With this, there's also no need to include a heavyweight library like jQuery, which can speed up page load speed a little bit.

Of course, if a style tag already exists in the document, you can add rules to it instead of creating a new one, if you wish.

Answer 2

Hide the elements at the beginning using CSS and then evaluate the cookie's existence in order to show the elements or keep them hide.

READ ALSO
Single Slider with several images

Single Slider with several images

I have a small requirementpls someone help me, I need slider or carousel with several columns and each contain 1 to 2 imgaes

51
Creating a two-columnar magazine layout with CSS

Creating a two-columnar magazine layout with CSS

Just for fun, I am trying to create a magazine style, two-column layout with CSS like in the image below:

45
Kendo dialog not expanding to width of bootstrap 4 form group

Kendo dialog not expanding to width of bootstrap 4 form group

I have a bootstrap 4 form group with a simple text inputI am using it within a kendo dialog, however the dialog isn't automatically expanding so that the label's text and the input are all on a single line

98
White space under grid container when viewing on mobile

White space under grid container when viewing on mobile

When I try to view my page on a mobile device (or Google Chrome inspector responsive design mode) I get white space under the containerBelow is the code

62