2018年8月31日金曜日

2018年8月30日木曜日

動的にimgタグで配置した画像の読み込みチェック

//画像読み込み確認
function imageChecker(){
var imgLoaded=0;
var imgTotal=0;
$('.swiper-wrapper img').each(function(){
imgTotal++;
if(0<$(this)[0].naturalHeight){
imgLoaded++;
}
});
if(imgLoaded == imgTotal){
$('.swiper-wrapper').css('opacity', 1);
}else{
setTimeout(function(){
imageChecker();
},100);
}
}
jQuery使用。
width()やheight()は、CSSで設定された値が返ってくるだけなので、naturalHeightを使う。

参考にしたサイト

2018年8月13日月曜日

iSpring 文字化けっぽくなる場合の留意点

iSprringで書き出す際に文字化けっぽくなることがある。

有効な対策として、以下2つを設定する。

  • iSpringのパブリッシュ設定「Advanced」の中の「Extended font compatibility」にチェックをいれる
  • PowerPointの「デザイン」「フォント」で日本語フォント、英語フォントともに「メイリオ」にする

※なお、iSpringは、フォントによって崩れがおきるので「メイリオ」を推奨する

2018年8月10日金曜日

Swiper使用に不意にスライド遷移してしまうのを防ぐ

みなさん、カルーセルのライブラリ何使ってますか?

http://idangero.us/swiper/
このSwiperというのが、PCでもタッチデバイスでも動いて、APIも分かりやすく、なかなか使い勝手良いのだけど1つハマったので共有。

http://idangero.us/swiper/api/
APIリファレンス
オプションで、「allowTouchMove」をfalseにしたほうがよい。デフォルトのtrueのままでPCで操作していると、操作しているときに不意に別のスライドにジャンプしてしまうことがある。