問題タブ [waitforimages]

私はjQuery プラグインを作成しましたが、最近、コールバックがthis元のセレクターである にアクセスできるように作成したので、次のことができます...

これは、jQuery API で期待されるいくつかのコードに非常によく似ています。

ただし、jQuery は常にネイティブ DOM 要素として提供されるため、 jQuery のメソッドを呼び出し始めるthisには、それを でラップする必要があります。$()

元々this 、 jQueryオブジェクトとして提供していました。しかし、その後、jQuery の の処理を​​観察した後、this変更しました。

最善の方法は何ですか？ラッピングして提供するには？

この例ではdiv#add、ボタンをクリックしたときに要素内に動的な画像を作成する次のコードを取得できますが、のロード イベントはimg機能しません。

onloadまた、動的にイベントを設定しようとしましたimgが、イベントが発生しませんでした。どんな助けでも大歓迎です。

更新 (2011-10-24 18:55 EST) : Load-Event のJQuery ドキュメントには次のように記載されているようです。

画像で使用する場合の load イベントの注意事項

開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

- クロスブラウザーで一貫して確実に動作
しない - 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しない
- DOM ツリーを正しくバブルアップしない - 起動しなくなる
可能性があるブラウザのキャッシュに既に存在する画像

load イベントの使用は、フェイル セーフのクロス ブラウザー ソリューションではないと思います。

更新 (2011-10-28 15:05 EST) : @Alex のおかげで、彼のwaitForImagesプラグインを使用してリスナーを作成することができました (それが正しい用語かどうかはわかりません)。読み込まれました。

そのため、現在、画像が読み込まれたかどうかを判断するのに最大 500 ミリ秒の遅延があります。これは合理的に思えますか？これは、動的に作成された img タグが読み込まれたかどうかを確認する最良の方法ですか?

素晴らしい:setIntervalすべての画像が読み込まれた後、関数のトリガーを停止する必要があります。私はまだその詳細を解決する必要があります。

私がする必要があるのは、親 div の中心に画像を配置することだけです。
まず、これを試しました。

完全にダウンロードされる前に $('#image1').height() と width() が 0 になるため、失敗しました。
そのため、特定の幅と高さになるまで画像のサイズを検査し続けようとしました。
お気に入り、

それでもうまくいきません。
$('#image').width() は、IE8でダウンロードする前に28pxを返すため（ちなみにIE7は大丈夫

でした ）

キャッシュされた画像では正常に機能しますが、キャッシュされていない画像では機能しません。
この関数は、Image1に幅と高さが設定される前に呼び出されます。

私は何をすべきか？

画像と画像のブレンドを行うプラグインを開発しています。次の URL で確認できます: http://www.psfinteractive.it/bigoom/try.html 2 つの画像セットでプラグインを 2 回呼び出しますが、レンダリングされた画像は 2 番目のセットに属するものです。何か案は？

編集：実際にはタイプミスを修正した後、何もレンダリングされません。助けてください！

};

これは現在部分的に機能しており、Firefox でのみ機能しています。どういうわけか新しい組み合わせが読み込まれていないようです。何か案は？ファイルにphpとhtmlを介していくつかのno cacheヘッダーを入れました：

http://www.psfinteractive.it/bigoom/try.php

ページでフルスクリーンのjQueryプラグインを使用しています。最初に画像を非表示にし、次にwaitforimageプラグインを使用して画像上でフルスクリーンを実行し、最後にfadeInを使用して画像を表示します。

私の問題は、どういうわけか、何かが正しく機能していないということです。これは私の開発ボックスでは正常に機能しますが、Webにページを読み込もうとすると、画像が完全に読み込まれる前にフェードインが開始されます。

フルスクリーナー関数にコールバックを追加しようとしましたが、同じ結果になりました。正しく機能するようにするにはどうすればよいですか？また、$ bg.load（）を使用してフルスクリーナーをロードしようとしましたが、うまくいきませんでした。

ありがとう！

説明divを正しい幅で表示できるように、画像の幅に変数を設定しています。ただし、jQueryには私のニーズに合ったコールバック関数がないようです。何をすればよいでしょうか？

私は主にphoto_width=$（this）.width（）;の周りのコードに関心があります。次のコードが発生した後に実行されることを確認したいので。アイデア？説明divが正しく設定されていないことはわかっています。これは、正しく設定するために2回クリックする必要があるためです。www.graysonearle.com/newtestでエラーを確認し、最初のボックス「Frog Utopia」をクリックして、いくつかのサムネイルをクリックします。

Masonry をテストしているときに、Firefox でシフト リロード (ハード リロード) すると、ページ内の画像の高さだけレイアウトがずれることに気付きました。divの高さは、画像の高さを知ることに依存する必要があると思います。これは理にかなっています。

私はすでに jquery.waitforimages.js を使用しているので、これをページとスクリプトの最後に追加しました。

すべてが機能しますが、ハードリロードしない場合にのみ発生するエラーが Firebug に表示されるようになりました。したがって、画像が既にキャッシュされている場合にこのエラーが発生すると想定しています。

これから抜け出す方法はありますか？ありがとう！

私はこれを持っています：

これは、ユーザーが最初にサイトにアクセスしたときに完全に機能します。ただし、更新時には、キャッシュが原因でちらつきが多く発生します。$('#div').hide();ドキュメント全体でをいくつかの異なる場所に移動しようとしましたが、結果は同じです。私も$(window).load()代わりに試しまし$(document).load()たが、役に立ちませんでした。もちろん、display: noneCSSで設定した場合、ちらつきはありませんが、これはJavaScript以外のユーザーにとってサイトが壊れていることを意味します。また、JavaScriptを介してCSSを設定しようとしました（つまり$(#div).css({'display':'none'});、これは機能しませんでした。方法があるはずです！

初めての Rails アプリケーションで、CoffeeScript に問題があります。という別のファイルに保存されているwaitForImages jQueryプラグインを使用していますwaitforimages.jquery.js。Rails が自動的に作成home.js.coffeeした . 次の jQuery スニペットを含めたい:

しかし、CoffeeScript 表記法を使用してこれをどのように記述すればよいでしょうか?

アップデート

現在はうまく機能しているので、最終的なコードを投稿すると思いました。問題の 1 つは、 home.js.coffeeの前waitForImagesにプラグインをロードしていなかったことです。

コーヒースクリプト:

HTML:

Chrome 24

私は現在、奇妙な機能を備えたサイトの書き直しに取り組んでいます。印刷する画像を選択するためのオプションのリストがユーザーに表示されるページがあります。

ユーザーは、必要な画像のチェックボックスをオフにしてから、サーバーにコールバックするボタンをクリックし、指定された画像に対して、必要なHTMLを非表示のDIVに挿入します。

さらに複雑なことに、画像のsrc属性は、実際には.NET MVCサーバー側のアクションへのリンクであり、データベースから画像を取得し、画像を取得して、画像のいくつかの異なる場所にテキストをレンダリングします。

出力HTMLは次のようになります。

これがjavascriptのステップ1であり、ajaxがサーバーにコールバックして、このPrintAreaDIVにデータを入力します。この後、次のことを行います。

サーバー側で画像を読み込むことに対応するために、waitForImages jqueryプラグインを使用してから、jqprintを使用してコンテンツを印刷します。

方程式を完成させるために、印刷スタイルシートがあります（メインのスタイルシートはmedia = "screen"であるため、これが唯一のスタイルシートである必要があります）。

これはFirefoxとIEで正常に機能します。

Chromeは一貫して機能しません。3つの画像を選択すると、最初の2つが表示されますが、2ページ目に表示されるはずの3つ目が表示および印刷される場合と、そうでない場合があります。それは散発的でかなりランダムに見えます。

提案やアイデア、またはChromeでページ分割全体で画像を一貫して印刷する方法はありますか？ここでの内部的な考え方は、waitForImages呼び出しが終了する前に、Chromeの印刷プレビューウィンドウが実際にレンダリングされていたため、コンテンツが表示されなかったというものでしたが、これをテストする具体的な方法は思いつきませんでした。

ありがとう