Date().getTime();if(instance.group.length<2||current.opts.wheel===!1||(current.opts.wheel==="auto"&&current.type!=="image")){return}e.preventDefault();e.stopPropagation();if(current.$slide.hasClass("fancybox-animated")){return}e=e.originalEvent||e;if(currTime-prevTime<250){return}prevTime=currTime;instance[(-e.deltaY||-e.deltaX||e.wheelDelta||-e.detail)<0?"next":"previous"]()})}})})(document,jQuery);制作メモとか、趣味とか、雑記。状況例BTOでPCを販売する感じに各パーツを指定できる商品があったとして、WEB上で視覚的にシミュレーションできたらいいよねって場面があったりする。ベースになるイメージがあって、選択肢により各パーツが切り替わる。いうの、ECでカスタマイズ可能な商品を販売する場合、あったらいいですよね。いうのを作る場合、パーツごとに画像を用意して表示するものを切り替えるわけで。選択肢が多くなれば画像も増えるし、画像を重ねる前提であれば透過pngじゃないといけなかったりして、読み込む量は相当なものになる。普通に組めば選択するたびに画像を読み込むことになって、画像が重ければ重いほど表示が遅延する。作った方は理解できても、使う方はめっちゃだるいよねってなる。切り替えが早くなればいい。早くするにはどうすればいいかを考えることになる。画像を軽くする高画質で書き出したjpgは当然として、pngも地味に重い。画像が大きければかなりやばいことになる。縦横のサイズを許容できるギリギリに削る。次に思いつくのは圧縮。オンラインでそういうやつの無料サービスがあったりする。PNGイメージをオンラインで圧縮するPNGイメージを透過付きPNG-8フォーマットにするPNG圧縮最適化ツール。compresspng.comもう一つはwebP化。現行版のphotoshopであれば標準で扱える。単純にwebP形式にするだけでかなり軽くなるし、設定で更に調整することもできる。ファイル形式を簡単に操作できるようになりました。ファイル形式を簡単に操作できるようになりました。helpx.adobe.comこんな感じ。気になるのは対応ブラウザだけど、IEのサポートが切れたしもうスタンダードでいいんじゃないですかね。browsers.caniuse.comプリロード画像の表示が遅い場合、改善策として使用する画像をhtml側でpreload(事前読み込み)する方法がある。画像表示の発火がcssだろうがjsだろうが関係なく効果がある。rel="preload">数個程度ならこれでいいんだけど、沢山あるとめんどくさい。いう場合はjQueryでpreload。Leaveswww.webdesignleaves.com記事は古いけど現役で使える。jsで拾うわけだからどんな形にでも対応できる。こんな感じで切り替えを仕込んでたとして。data-filepath="img/11.png">select</a></li></ul>こんな感じで書ける。})})1つずつ書かなくていいのは助かる。これなら後付でも簡単にできる。外部ファイル上で書いてもしっかり効果があった。懸念点preloadは素晴らしい機能だと思うけど、こちらが指定するファイル全ての読み込みを強制してるわけで、閲覧中に表示しなかったとしても通信が発生しちゃうわけで、閲覧者に優しくない感じがする。あとはまあ、最初に一気に読ませるわけだからそれはそれで遅くなりそうな感じ。その他cssでmask-imageを使えば軽く作ったjpgで済むから脱透過pngができるように思ったんだけど、対象になるバリエーションが全て同じ形状じゃないとそれぞれにマスク用の画像を作らなきゃいけないから意味ないなってことで実用性としていまいちだった。プロパティなどの基本的な使い方についての覚書です。Factory関連記事WEB[EC-cube]サイトのドメイン変更後の設定方法EC-Cube使ってるところをよそのサービスに変えることになった。独自ドメイン外したらアクセスできないってこともある。WEB[JS]サイト制作時に揃えとくと便利なjQueryプラグイン当然ながら、事前にライブラリを突っ込んどかないと各種プラグインは動かない。バージョンが合ってないために動かないこともあれば、複数突っ込んだときにかち合って動かないこともある。考えなしにやってたら自分の首を絞めることになるので気を付...WEBリンクメモてきとーに。欲しい情報を調べてもぴったんこのがほぼ無いとういやつ。WEBWordPressで会員登録機能と会員限定コンテンツとメルマガ配信をやろうと思ったやろうとおもったんだ。個人的なアレなので確実かは分からない。コメントをキャンセルメールアドレスが公開されることはありません。※サイトΔホームWEBスポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。transaction")},s.open("GET",d,!0),s.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),s.send()}}タイトルとURLをコピーしました。