Scrollbear -- Make your blog more smooth!
Scrollbear Scrollbear is a tool that maintains the container scroll position when images loaded. Scrollbear is suitable in blog platforms where exist many photos and images. When images loaded, the scroll position will jump and cause a unfriendly experience. Scrollbear will trace the container height and maintain the scroll position when the images loaded and container height change. Demo Installa
ローディングをかっこ良くみせるJavaScriptライブラリ「PleaseWait.js」
twitter facebook hatena google pocket ページの読み込みが長いと離脱につながってしまうので、ローディング画像を見せることがあるかと思います。 そのローディング画像をかっこ良く見せられるJavaScriptライブラリPleaseWait | A Loading Page for your SPA by Pathgatherを紹介します。 sponsors 使用方法 PleaseWait | A Loading Page for your SPA by Pathgatherからファイル一式をダウンロード。 body内に下記を記述するだけで完成です。 <link href="please-wait.css" rel="stylesheet"> <script type="text/javascript" src="please-wait.js"></scrip
【翻訳】ソーシャルボタンはお友達さ！ - MOL
ども、実兄からFacebook友達申請きて承認を見送るt32kです。そんなソーシャル時代ですけどみなさんいかがお過ごしか？みなさんはこうは思わないだろうか？いいね！ボタンなどのソーシャルボタンはいっぱいあるけど、どうゆうふうに実装すればいいのよ！スニペット、コピペでいいの？ってね。そんなこと考えていたら、いい記事があったので翻訳してみたよの巻。 Original：Social button BFFs（2011-09-27）by Stoyan Stefanov TL;DR:JavaScriptの非同期読み込みはWebアプリのパフォーマンスにおいて重要な問題だ。以降に書かれている内容は一般的なソーシャルボタンに共通する取り扱い方についての記事であり、ソーシャルボタンに残りのコンテンツ読み込みをブロックさせないことを学べるだろう。結局のところ、ユーザーはあなたの コンテンツを最初 に見たいのであ
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
riaxdnp.jp - このウェブサイトは販売用です！ - riaxdnp リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
RequireJSを活用したキャッシュ防止、A/Bテスト、画像事前読込など - Kengo's blog
[for English user] This article is a simple introduction about my project for Japanese developer. You do not have to read this, reading this project directly would be enough. RequireJSの応用方法について調べた内容をGitHubでまとめています。実装詳細はGitHubをご覧いただくとして、このエントリではそれぞれの応用について簡単な紹介をしたいと思います。 キャッシュ防止 JavaScriptファイルがブラウザにキャッシュされてしまうために、スーパーリロードなりキャッシュのクリアなりをしないと変更後のファイルが試せないことがあります。 キャッシュを防ぐ方法としてクエリパラメータの利用が知られていますが、Requ
RequireJSでTwitter Bootstrap（jQuery）を非同期ローディングしてみる | DevelopersIO
こんにちは、すどーです。 RequireJSでjQueryやjQueryプラグインの非同期ローディングを試してみました。 最近は大規模な構成になると、「ちぢめる、まとめる、かためる（minify, combine, compress）」のが主流のようです。 ですが小中規模な構成や、依存関係にあるフレームワークなども多くあるので、簡単な使い方だけでも覚えておくと便利かと思います。 RequireJS： http://requirejs.org/ RequireJS API： http://requirejs.org/docs/api.html RequireJSの主な特徴 モジュール化（AMD APIをサポート） 非同期ローディング OPTIMIZERによる最適化 1. モジュール化（AMD APIをサポート） AMD(Asynchronous Module Definition)はComm
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
RequireJS
/* --- RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code. IE 6+ .......... compatible ✔ Firefox 2+ ..... compatible ✔ Safari 3.2+ .... compatible ✔ Chrome 3+ ...... compatible ✔ Opera 10+ ...... co
[JavaScript] RequireJSでjQueryを読込む、require-jquery.jsを使わずに
RequireJS は読込みをブロックすること無く複数のJavaScriptを読込むことが可能なライブラリです。 ロード後に関数を実行させたりとか現在のWeb制作に必要な機能を提供してくれています。 便利なのでしょう、すでに多くのHow toがネット上にあふれています。 読込みには別のライブラリを使っていたのですが、この良いと噂のrequire.jsを試してみます。 しかし早速つまづいたのがjQueryの読込みでした。 このrequire.jsを使ってjQueryを読込む方法はRequireJSのサイトに詳しく書かれています。 HOW TO USE REQUIREJS WITH JQUERY 解説されている方法は require.jsとjQueryをcombined（合体）させた特別なrequire-jquery.jsを使用した方法です。 これでも良いっちゃ良いけど、最新版jQueryの保
![[JavaScript] RequireJSでjQueryを読込む、require-jquery.jsを使わずに](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c35180033ae4020a0e0c1b662cd0d153d918e3f/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2F_fb%2Ffb_inazumatv2.png)
画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net
画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード 幅が1024px以下なら何も読み込まない それ以外はJQMのCSSをロード こう設定すれば、601px～1
JavaScriptを分割&非同期で読み込めるRequireJS | バシャログ。
『サニー 永遠の仲間たち』という韓国映画がとても良かったです！minamiです。 サイトで使用するJavaScriptを非同期で読み込むライブラリが昨今増えていますが、その中でRequireJS というライブラリがバージョンアップしたとのことなのでさわってみました。 RequireJSとは RequireJSは、JavaScriptのファイルやモジュールを非同期でロードできるJavaScriptライブラリです。推奨環境は下記になっています。 IE 6以上 Firefox 2以上 Safari 3.2以上 Chrome 3以上 Opera 10以上 ダウンロードする まずライブラリをダウンロードします。 DOWNLOAD REQUIREJS RequireJS の設置 ダウンロードしたら、以下のように設置します。 ├ index.html └ /js ├ main.js（読み込み管理用jsフ
FN1205002 - PreloadJSで外部画像ファイルの読込みを待つ - HTML5 : テクニカルノート
PreloadJSは、画像のほか、サウンドやJavaScriptなどの外部データを読込んで、その経過や完了を捉えて処理するためのライブラリです。本稿では、画像ファイルの読込みを待って、その画像にもとづく処理を加えてみます。 なお、読込み待ちのない外部画像ファイルの扱いについては、「EaselJSで外部ビットマップファイルを読込んで回す」をご参照ください。 01 外部画像ファイルを読込んでCanvasの中央に表示する PreloadJSのライブラリは、予めサイトからダウンロードして、適切な場所に保存しておいてください(図001)。本稿では、HTMLドキュメントと同じ階層に、ダウンロードしたpreloadjsフォルダが置いてあるものとします。 図001■PreloadJSライブラリのJavaScriptファイル まずは、PreloadJSのプリロードなしに、外部画像ファイルを読込んでCanva
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://nanobar.micronube.com/
お前自分ちのページャUIが本当に速いと思ってんの？
Home - Yep-Nope
GitHub - defunkt/jquery-pjax: pushState + ajax = pjax
GitHub - ded/script.js: Asyncronous JavaScript loader and dependency manager