Tag: async

I would like to know how we can add async and defer in each js script

What I have tried so for.

1. Using Advagg module in optimize js/css

2. In theme.libraries.yml but it break the functionality

   Added parameter

   //cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css: { type: external, attributes: { async: true } }
   
   js/aos.js: { attributes: { async: true } }
   

Custom file which created issue:

/**
* @file
* Global utilities.
*
*/
(function ($, Drupal) {

'use strict';

 Drupal.behaviors.mytheme = {
   attach: function (context, settings) {
   $('button.navbar-toggler').click(function() {
    if (!$('#superfish-main-accordion').hasClass('sf-expanded')) {
      $('#superfish-main-toggle').click().hide();
    }
  });

  $(window).scroll(function() {
if($('.view-community .view-content .views-row .views-field .field-content .aos-animate').length){
$('.commu_inner p').each(function() {
var $this = $(this),
    countTo = $this.attr('data-count');

$({ countNum: $this.text()}).animate({
  countNum: countTo
},

{

  duration: 1500,
  easing:'swing',
  step: function() {
    $this.text(Math.floor(this.countNum));
  },
  complete: function() {
    $this.text(this.countNum);
  }
});
}); 
}
  });
   if($(".reset-blog-serach").length < 1){
   //$("#edit-actions--3").remove();
  
   $(".node--type-blog-page .views-exposed-form .form-submit").parent().after("<button type='button' class='reset-blog-serach btn btn-primary'>Reset</button>");
}
if($(".reset-public-serach").length < 1){
   $(".node--type-public-landing-page input:text(name='combine')").after("<button type='button' class='reset-public-serach btn btn-primary'>Reset</button>");
}
$(".node--type-decode .speaker_bios .container .views-element-container .view-id-decode .row .col-lg-3 .views-field-nothing .field-content .onpoup").each(function() {  
            //alert('hello');
         $(this).on("click", function(){
        var showpopup = $(this).attr('class').split(' ')(1);
        //alert('hello');
        //alert(showpopup);
        $(".node--type-decode .container .views-element-container  .row .col-lg-3 .views-field-nothing .field-content .masks").each(function(){
        if($(this).hasClass(showpopup)){
            //alert('yes');
            $('.overlay').fadeIn();
            $(this).fadeIn();
            $('body').css('overflow-y', 'hidden');
          }
        });
         });

});

$(".close").click(function(){
    $(".masks").fadeOut('active');
    $('.overlay').fadeOut();
    $('body').css('overflow-y', 'scroll');
});

// Function for close the Modal
function closeModal(){
    $(".node--type-decode .container .views-element-container .view-id-decode .row .col-md-3 .views-field-nothing .field-content .col-md-3.masks").removeClass("active");
}

// Call the closeModal function on the clicks/keyboard

$(".close, .masks").on("click", function(){
    closeModal();
});



$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        closeModal();
    }
}); 
        
// $(window).load(function() {
        
    // AOS.init({
        // duration: 1200,
    // });

// }); 
$('.blog_scription_button').removeClass('btn-primary');
$('#video_archive .container .views-element-container .view-id-decode .view-content .table-responsive .table tbody tr .views-field-field-title').each(function(){
var value = $(this).text();
//alert(value);
//alert(value.length);
if(value.length == '10'){ //true
   //alert('hello');
    $(this).next('td').attr("colspan", 2);
    $(this).next('td').addClass('tdcolspan2')
    $(this).remove();
    //$(this).next('td').attr("colspan", 2);
    //$(this).next('td').attr("colspan", 2); 
  
}
else{
    
}
});


 /*  window.addEventListener('load', async () => {
 $('#vid').play();
 });*/
    
$(document).ready(function() {
    
        $('.webinar_slider').owlCarousel({
            loop:true,
            margin:10,
            dots:false,
            autoplayTimeout: 7000,
            nav:true,
            mouseDrag:true,
            autoplay:true,
            addClassActive:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1
                }, 
                1000:{
                    items:1
                }
            }



        });
         if($(".vertical-nav").length > 0){
   $(".vertical-nav").slick({
    dots: false,
    infinite: true,
    speed: 500,
    vertical: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: '.vertical-center',
  });
 }
 if($(".vertical-center").length > 0){
   $(".vertical-center").slick({
    dots: false,
    infinite: true,
    speed: 500,
    fade: false,
    vertical: true,
    slidesToShow: 4,
    slidesToScroll: 0,
    arrows: false,
    draggable: true,
    centerMode: true,
    focusOnSelect: true,
    asNavFor: '.vertical-nav',
  });
 }
        


/* End */
$('.navigation_about li a').each(function(e) {
$(this).on("click", function() {
var getid = $(this).attr('href');
//alert(getid);
$('html, body').animate({ scrollTop: $(getid).offset().top - 90 }, 1000);
});
});


$('.reset-blog-serach').on('click', function(e){
    e.preventDefault();

       
       $('body').append('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
       var base_url = window.location.origin;
       var blog_list_url = base_url + "/check-exists-entry"
       var elementSettings = {};
       elementSettings.url = blog_list_url;
       elementSettings.progress = {
        type: 'throbber'
        };
        var result =  Drupal.ajax(elementSettings).execute();
          result.done(function(msg){
          $(".ajax-progress.ajax-progress-fullscreen").remove();
        })
       
   
     
});

  /**************************** Start : Public Reset Button ******************/

 $('.reset-public-serach').on('click', function(e){
    e.preventDefault();

       
       $('body').append('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
       var base_url = window.location.origin;
       var publication_list_url = base_url + "/public-reset-button"
       var elementSettings = {};
       elementSettings.url = publication_list_url;
       elementSettings.progress = {
        type: 'throbber'
        };
        var result =  Drupal.ajax(elementSettings).execute();
          result.done(function(msg){
          $(".ajax-progress.ajax-progress-fullscreen").remove();
        })
       
    //}
     
});


  /*************************** End : Publication Reset Button ******************/
  /**************************** Start : blog relevence ******************/
  $(".form-item-blog-search-by").on('change', function(e){
    e.preventDefault();
       var text = $('option:selected', this).val();
       //console.log(text); 
       $('body').append('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
       if(text == 2){
        var base_url = window.location.origin;
       var publication_list_url = base_url + "/blogrelevence"
       var elementSettings = {};
       elementSettings.url = publication_list_url;
       elementSettings.progress = {
        type: 'throbber'
        };
       var result =  Drupal.ajax(elementSettings).execute();
      result.done(function(msg){
        $(".form-item-blog-search-by option(value=1)").removeAttr('selected');
        $(".form-item-blog-search-by option(value=2)").prop('selected', true);
        jQuery(".ajax-progress.ajax-progress-fullscreen").remove();
       })
       }else{
        console.log('jgfj')
          $('body').append('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
          var base_url = window.location.origin;
         var blog_list_url = base_url + "/check-exists-entry"
         var elementSettings = {};
         elementSettings.url = blog_list_url;
         elementSettings.progress = {
          type: 'throbber'
          };
          var result =  Drupal.ajax(elementSettings).execute();
          result.done(function(msg){
          $(".ajax-progress.ajax-progress-fullscreen").remove();
        })
       }
     });
 /*************************** End : blog relevence ******************/

 /**************************** Start : Publication Dropdown ******************/
 $(".public-dropdown input(type='checkbox')").on('click', function(e){
    e.preventDefault();
   $('body').append('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
    var termname = $(this).next('label').text();
    console.log("val" + $(this).attr('name') + $(this).val());
    var val = $(this).val();        
    var filtername = $(this).attr('data-drupal-selector');
      if(filtername == 'edit-created-2'){
        termname = filtername;
      }
    
  var elementSettings = {};
  elementSettings.url = "/publicdropdown";
  elementSettings.progress = {
    type: 'throbber'
  };
  elementSettings.submit = {
      termid: termname,
      
  };      
  var publication_dropdown = Drupal.ajax(elementSettings).execute();
  publication_dropdown.done(function(msg){
          $(".ajax-progress.ajax-progress-fullscreen").remove();
        })
     });
  /*************************** End : Publication Dropdown ******************/

 });
 }
}
jQuery( document ).ready(function() {

 $(document).on("click",".team_leader_button, .team_director_button, .team_advisor_button", function(e){
   e.preventDefault();
   $('#TeamModal .team_image').html("");
   $('#TeamModal .team_name').html("");
   $('#TeamModal .team_position').html("");
   $('#TeamModal .team_desc').html("");    
   var img = $(this).closest(".team").find(".team_leader_content_img").html();
   var name = $(this).closest(".team").find(".team_leader_name").text();
   var position = $(this).closest(".team").find(".team_leader_position").text();
   var desc = $(this).closest(".team").find(".team_leader_desc").text();
   console.log(name);
   $('#TeamModal .team_image').html(img);
   $('#TeamModal .team_name').html(name);
   $('#TeamModal .team_position').html(position);
   $('#TeamModal .team_desc').html(desc);
   $("#TeamModal").modal();
});

});
})(jQuery, Drupal);