画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで

Roulette.js Roulette.jsは、画像をルーレット（スロット）のように回転させることができるjQueryプラグインです。 画像を数字に変更すれば、ビンゴっぽいのも作れるかも。 みてもらうのが一番早いと思うので、サンプルをご覧ください。 →　ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。 ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。 使い方 こちらのサイトをご覧ください。公式のデモページになってます。回転スピードを調節したり、止まった時にでる画像を指定したりと、いろいろ試すことができます。 http://demo.st-marron.info/roulette/sample/dem

本当に今更だけどjQueryなどのライブラリって便利だなー。 ちょっとしたときに使う、画像切り替え（入れ替え）。 ※jQueryは、Google AJAX Libraries APIから。 画像切り替え デモ Javascript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript" ></script> <script> $(document).ready(function(){ //ナビゲーションのmouseover。画像切り替えとは関係ない。 $("ul > li").hover(function(){ $(this).fadeTo(200,0.5); },function() { $(this).fadeTo(200,1); }); /

Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery

jQueryに僕が弱いのではまったのですが、もしかすると同じような情報を探している人もいるかもしれないので、メモ。 Contact Form 7はWordPressで簡単にフォームを作ることができるプラグイン。AjaxZip2は郵便番号を入力すると、ボタンなどをクリックせずに住所をテキストボックスなどに出力させることができるJavaScriptライブラリ。この2つをWordPress上で組み合わせる方法。 まず、WordPressでjQuery（またはPrototype）を使うにはちょっとしたコツがいります。理由は次のエントリーを参照してください。 WordPressではじめてのjQueryが動かないという人へ スライドショー レビューも兼ねて WordPressでjQueryが動かない件 | Bliss そこで、jQueryはこんな感じで読み込みます。header.phpあたりのhead

いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，

ドットインストール代表のライフハックブログ