javascript - 問個問題，是不是外部js檔案沒有下載完，ready函數就不會執行？-php教程-PHP中文網

javascript - 問個問題，是不是外部js檔案沒有下載完，ready函數就不會執行？

WBOY

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

原創

1217 人瀏覽過

最近遇到個問題，網站引用了google的地圖api，我本地是打不開的，那個js又要引用很久，一直是pending狀態，但是這個時候點擊某些按鈕，特別是這些按鈕的點擊事件在ready函數裡面，就會沒有效果。有什麼解決方案？

<code>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=<?php echo $language; ?>"></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 echo $language; ?>"></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文件下載下來放在自己的網站靜態資源裡面。