いつもお世話になっております。
現在Railsでウェブページを作成しております。
以下のようにフォームを作り、submitを押した場合に「送信中」メッセージとgifを表示しようとしております。ボタンを押すまではCSSで非表示にしております。
PCやandroid端末ではgifが動くのですが、iPhoneのSafariブラウザでは動きません(静止画像状態です)。iPhoneは6sと8で確認しました。
以下記事のようにiPhoneのsafariブラウザではgifが再生するのが難しいようなのですが、
Safariでgifを再生させるまたは送信中のような小さなアニメーションを表示するにどのようにすればよいのでしょうか。
http://ascii.jp/elem/000/001/072/1072183/
ご教示いただけますと幸いです。
よろしくお願いいたします。
Ruby
1 2#show.html.erb 3 <script> 4 function send_btn_on(){ 5 document.getElementById("loading").style.display="block"; 6 } 7 </script> 8 9 <div class="post_form"> 10 <%= form_with(model: @user_info, local: true, html: {id: 'inform_save', class: 'form', autocomplete: 'off'}) do |f| %> 11 ・ 12 ・ 省略 13 ・ 14 <div id="loading"> 15 送信中です</br> 16 <%= image_tag('sending.gif') %> 17 </div> 18 <div class="send_btn_field"> 19 <%= f.submit '', id: 'send_btn', data: { disable_with: "送信中..." }, onclick:"send_btn_on()"%> 20 </div> 21 </div> 22 23 24CSS 25#loading { 26 display: none; 27} 28
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。