Q&A
svgが提示されていません
スマホページでSVGアニメを表現したいのですが、
読み込み時に固まってしまい、スムーズに描画されません。
ページ読み込み完了後（数秒遅らせて）、表示させたいです。
該当のソースコード
<body> <div id="gtco-intro" class="anime"> <div class="container"> <div class="row"> <div class="col-md-12"> <img src="images/vdLogo_lineSP_animated.svg" class="animeImg imgsp"> </div> </div> </div> </div>（中略）
<div class="container logo imgsp" style="background: url(images/vdLogo_SP.png)"> <div class="row"> <div class="col-md-8 col-md-offset-2"> </div> </div> </div>（中略）
<script> $(function(){ $(".mainSite").css("display", "none"); setTimeout(function() { $('.anime').fadeOut(); }, 10000); }); $(function(){ $(".mainSite").css({opacity:'0'}); setTimeout(function(){ $(".mainSite").css("display", "block"); $(".mainSite").stop().animate({opacity:'1'},1000);//1秒かけてコンテンツを表示 },10500); }); </script>試したこと
・scriptにdelayを指定
・$(window).on('load', function() を追記
vivus instantを使っておりまして、コードの記述をしていないのですが
どうしたら良いでしょうか。（初心者丸出しで申し訳ございません。）
ダミーのsvgをおくか、せめてどうやってsvgを呼び出しているか書いて下さい
またjsにおいてどこがsvgにあたるのかもわかりません
svgの場合大きくsvgタグ、objectタグ、imgタグのいずれかで呼び出すかと思います
お返事ありがとうございます。追記させていただきましたがいかがでしょうか。
（デザインが主にやっておりまして、htmlとcssまではなんとか…なのですが
今回はにっちもさっちも、という状況です。何卒よろしくお願いいたします）
ちなみにimgで読んだsvgは静的な画像になるケースもあると思いますが
「読み込み時に固まってしまい、スムーズに描画されません」とは
具体的にどういう状況なのでしょう？
固まる＝ブラウザがフリーズする？アニメしない？
スムーズに＝カクカクなら動く？全然動かない？そもそも画像が表示されない？
ありがとうございます。SVGは線を一筆書きのように描いていくアニメーションです。
ページの読み込みに数秒を要し、svgアニメが途中から始まってしまいます。
動きは、アニメが始まるまでは途中まで一気に表示され、始まってからはスムーズです。
あなたの回答
tips
プレビュー
