javascript - 问个问题，是不是外部js文件没有下载完，ready函数就不会执行？-php教程-PHP中文网

javascript - 问个问题，是不是外部js文件没有下载完，ready函数就不会执行？

WBOY

发布： 2023-03-02 06:36:01

原创

1254 人浏览过

最近遇到个问题，网站引用了google的地图api，我本地是打不开的，那个js又要引用很久，一直是pending状态，但是这个时候点击某些按钮，特别是这些按钮的点击事件在ready函数里面，就会没有效果。有什么解决方案？

<code>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=<?php%20echo%20%24language;%20?>"></script> 
   
 <script type="text/javascript"> 


  $(document).ready(function() {
    var lat = {lat: <?php echo $geocodes[0]; ?>, lng: <?php echo $geocodes[1]; ?>}; 
    var myOptions = {  
       zoom: 17,
       center: lat,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true,
       zoomControl: true,
    }; 
    var map = new google.maps.Map(document.getElementById("map"), myOptions);   
    var marker = new google.maps.Marker({
      map: map,
      // Define the place with a location, and a query string.
      place: {
        location: lat,
        query: `<?php echo $address; ?>`

      },
      // Attributions help users find your site again.
      attribution: {
        source: 'Google Maps JavaScript API',
        webUrl: 'https://developers.google.com/maps/'
      }
    });

    // Construct a new InfoWindow.
    var infoWindow = new google.maps.InfoWindow({
      content: `<?php echo $store; ?><br><?php echo $address; ?>`
    });
      infoWindow.open(map, marker);
    // Opens the InfoWindow when marker is clicked.
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    }); 

  });
    
 </script> </code>

登录后复制

其他ready函数

<code>$(document).ready(function() {
    // Language
    $('.language a').on('click', function(e) {
        e.preventDefault();

        $('.language input[name=\'code\']').attr('value', $(this).attr('href'));

        $('.language').submit();
    });
});</code>

登录后复制

回复内容：

<code>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=<?php%20echo%20%24language;%20?>"></script> 
   
 <script type="text/javascript"> 


  $(document).ready(function() {
    var lat = {lat: <?php echo $geocodes[0]; ?>, lng: <?php echo $geocodes[1]; ?>}; 
    var myOptions = {  
       zoom: 17,
       center: lat,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true,
       zoomControl: true,
    }; 
    var map = new google.maps.Map(document.getElementById("map"), myOptions);   
    var marker = new google.maps.Marker({
      map: map,
      // Define the place with a location, and a query string.
      place: {
        location: lat,
        query: `<?php echo $address; ?>`

      },
      // Attributions help users find your site again.
      attribution: {
        source: 'Google Maps JavaScript API',
        webUrl: 'https://developers.google.com/maps/'
      }
    });

    // Construct a new InfoWindow.
    var infoWindow = new google.maps.InfoWindow({
      content: `<?php echo $store; ?><br><?php echo $address; ?>`
    });
      infoWindow.open(map, marker);
    // Opens the InfoWindow when marker is clicked.
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    }); 

  });
    
 </script> </code>

登录后复制

其他ready函数

<code>$(document).ready(function() {
    // Language
    $('.language a').on('click', function(e) {
        e.preventDefault();

        $('.language input[name=\'code\']').attr('value', $(this).attr('href'));

        $('.language').submit();
    });
});</code>

登录后复制

<code><script>
var js = document.createElement('script');
js.src= 'js地址';
document.querySelector('body').appendChild(js);
</script></code>

登录后复制

这样不会阻塞

你 ready函数都依赖于google的api,只能等api加载完成咯；嫌慢的话吧谷歌的api文件下载下来放在自己的网站静态资源里面。