ホームページ > ウェブフロントエンド > jsチュートリアル > 自作推奨Javascriptサムネイル機能(onDOMLoaded)…_画像特殊効果

自作推奨Javascriptサムネイル機能(onDOMLoaded)…_画像特殊効果

PHP中文网
リリース: 2016-05-16 19:08:16
オリジナル
1253 人が閲覧しました

070520: Norman Jun は、Dean Edwards とその他の onDOMLoaded イベントに対するクロスブラウザー ソリューションを提供しました...
実際、onDOMLoaded は、DOM がロードされるとき (画像はまだロードされていないとき) には「存在しない」イベントです。 ...
ブラウザごとにサポート レベルが異なるため...
そのため、ハックが必要です...
幸いなことに、ディーンと他の友人たちが研究を重ねた結果、解決策を見つけ出しました。 ...
感謝の意を表したいと思います...
サムネイル機能自体の改善は、以前のバージョンの 2 つの異なるモード (高速とスムーズ) を統合することです...
いわゆる高速モードは while ループを使用します...
高速ですが、一時停止アニメーションが発生しやすいです...
いわゆるジェントル モードは、上記の問題を解決するために setInterval 関数を使用します...
残念ながら、setInterval には最小期間制限があります...
そのため、速度は遅くなります...
高速モードから穏やかモードへの切り替えしきい値を 500 に設定しました...
つまり、ページの画像サイズが 500 に達すると、ジェントル モードが有効になり、画像が縮小されます...
必要に応じて変更できます...
詳細を参照してください ResizeImgs の 2 行目関数...

070516: コードのパフォーマンス向上に関する提案をしてくれた Norman に感謝します...
すべての要素の走査を画像配列の走査に変更します...
Norman の提案については、次の関数です。画像を読み取る前のサムネイル表示...
実装に失敗しました...
第一に、Firefox が onreadystatechange イベント (onload のみ?) をサポートしていないためです...
第二に、テスト中ですIE での対話状態での画像のサイズ変更も、実行する前に更新する必要があることがわかりました...
つまり、操作前にページがロードされる (または一度ロードされる) まで待つ必要があります。
私の才能と知識の不足で申し訳ありません...
解決策があれば、教授にメッセージを残してください...

原理はどうでしょうか。 ..
画像配列を走査することです...
resize 属性が定義されている場合、サムネイルを実行します...
サイズ変更するとき 値が数値 (かつ元の幅より小さい場合) image) を指定すると、デジタル幅に縮小されます...
resize が別の値の場合、デフォルトの幅に縮小されます...
高さ属性をクリアする必要がある理由については...
回答: 幅と高さの比率を維持するため...
上...

コードが長すぎるため...
まだ投稿されていません.. .
使用方法については、デモを参照してください...

上記は、推奨される Javascript サムネイル関数 (onDOMLoaded)..._image 特殊効果の詳細については、注目してください。 PHP 中国語 Web サイト (m.sbmmt.com)!


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート