WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

jQuery.3 では .loadは廃止

2016年6月に「jQuery.3.x」バージョンがリリースされ、現在では、最新版のv3.2.1がリリースされています。
jQuery.2.x」バージョンから「jQuery.3.x」バージョンへの大きな変更として、 .load .unload .error のイベントが廃止されました。
中でもよく使われる「 .load() 」イベントは「jQuery.3.x」バージョンでも使用出来る代わりの記述方法をしっかりと覚えておきましょう。

jQuery.2.x」バージョンまでの書き方
/*  load  */
$(window).load(function(){
  //実行内容
})
jQuery.3.x」バージョンまでの書き方
$(window).on('load',function(){
  //実行内容
});


.click() から
.on('click',function() になったのと同じイメージです。


以上を踏まえて、3.xバージョンでも動くように書き換えましょう。

$(function() {

if($(window).width() > 767){ 
$(function() {
  $('#container').css('display','none');
  $('#loader').fadeIn(2000);
});

$(window).on('load',function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#container').css('display', 'block');
});

//5秒たったら強制的に実行
$(function(){
  setTimeout(stopload(),5000);
});
function stopload(){
  $('#loader-bg').delay(3000).slideUp(400);
  $('#container').css('display','block');
};

}else {
 $('#loader-bg').css('display','none');
 $('#loader img').css('display','block');
};
});
CDNに接続できない場合の代替策

なかなかないとは思いますが、万が一CDNがダウンしてしまった場合の代替策として、フォールバックという方法があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む -->
<script>
window.jQuery || document.write(‘<script src="js/jquery-3.2.1.min.js"><\/script>’);
</script>