首页  >  文章  >  后端开发  >  javascript - 问个问题,是不是外部js文件没有下载完,ready函数就不会执行?

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

WBOY
WBOY原创
2016-12-01 00:56:451210浏览

最近遇到个问题,网站引用了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>

回复内容:

最近遇到个问题,网站引用了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>
var js = document.createElement('script');
js.src= 'js地址';
document.querySelector('body').appendChild(js);
</script></code>

这样不会阻塞

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn