私はやってみたいです：
$("img").bind('load', function() {
// do stuff
});
ただし、画像がキャッシュから読み込まれる場合、loadイベントは発生しません。jQueryドキュメントはこれを修正するプラグインを提案していますが、機能しません
405296 次
14 に答える
585
がすでに設定されている場合srcは、イベントハンドラーをバインドする前に、キャッシュされたケースでイベントが発生します。.completeこれを修正するには、次のように、に基づいてイベントをチェックしてトリガーすることをループできます。
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) {
$(this).load(); // For jQuery < 3.0
// $(this).trigger('load'); // For jQuery >= 3.0
}
});
于 2010-10-06T21:34:18.367 に答える
53
非DOMイメージオブジェクトにリロードすることを提案できますか？キャッシュされている場合、これにはまったく時間がかからず、onloadは引き続き起動します。キャッシュされていない場合は、イメージのロード時にオンロードが発生します。これは、イメージのDOMバージョンのロードが完了するのと同じ時間である必要があります。
Javascript：
$(document).ready(function() {
var tmpImg = new Image() ;
tmpImg.src = $('#img').attr('src') ;
tmpImg.onload = function() {
// Run onload code.
} ;
}) ;
更新（複数の画像を処理し、正しく順序付けられたonload添付ファイルを使用）：
$(document).ready(function() {
var imageLoaded = function() {
// Run onload code.
}
$('#img').each(function() {
var tmpImg = new Image() ;
tmpImg.onload = imageLoaded ;
tmpImg.src = $(this).attr('src') ;
}) ;
}) ;
于 2010-10-06T21:33:32.140 に答える
41
私の簡単な解決策は、外部プラグインを必要とせず、一般的なケースでは十分なはずです。
/**
* Trigger a callback when the selected images are loaded:
* @param {String} selector
* @param {Function} callback
*/
var onImgLoad = function(selector, callback){
$(selector).each(function(){
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
});
};
次のように使用します。
onImgLoad('img', function(){
// do stuff
});
たとえば、ロード時に画像をフェードインするには、次の操作を実行できます。
$('img').hide();
onImgLoad('img', function(){
$(this).fadeIn(700);
});
または、代わりに、jqueryプラグインのようなアプローチを好む場合：
/**
* Trigger a callback when 'this' image is loaded:
* @param {Function} callback
*/
(function($){
$.fn.imgLoad = function(callback) {
return this.each(function() {
if (callback) {
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
}
});
};
})(jQuery);
そしてそれをこのように使用します：
$('img').imgLoad(function(){
// do stuff
});
例えば：
$('img').hide().imgLoad(function(){
$(this).fadeIn(700);
});
于 2013-12-03T12:20:23.670 に答える
23
あなたは本当にjQueryでそれをしなければなりませんか？onloadイベントを画像に直接添付することもできます。
<img src="/path/to/image.jpg" onload="doStuff(this);" />
キャッシュからかどうかにかかわらず、画像が読み込まれるたびに起動します。
于 2010-10-06T21:34:00.877 に答える
16
このコードは、読み込みエラーをサポートして使用することもできます。
$("img").on('load', function() {
// do stuff on success
})
.on('error', function() {
// do stuff on smth wrong (error 404, etc.)
})
.each(function() {
if(this.complete) {
$(this).load();
} else if(this.error) {
$(this).error();
}
});
于 2014-03-20T10:54:38.413 に答える
13
私は自分でこの問題を抱えていて、キャッシュを強制終了したりプラグインをダウンロードしたりすることのない解決策をどこでも探しました。
私はこのスレッドをすぐに見なかったので、代わりに興味深い修正であり、（私は）ここに投稿する価値のある何か他のものを見つけました：
$('.image').load(function(){
// stuff
}).attr('src', 'new_src');
私は実際にここのコメントからこのアイデアを得ました：http ：//www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
なぜ動作するのかわかりませんが、IE7でこれをテストし、動作する前にどこで壊れたかを確認しました。
それが役に立てば幸い、
編集
受け入れられた答えは実際に理由を説明しています：
srcがすでに設定されている場合は、イベントハンドラーをバインドする前に、ケースに入れられたキャッシュでイベントが発生します。
于 2012-12-13T13:29:01.450 に答える
5
jQueryを使用して画像のsrcを使用して新しい画像を生成し、それにloadメソッドを直接割り当てることで、jQueryが新しい画像の生成を終了したときにloadメソッドが正常に呼び出されます。これはIE8、9、10で私のために働いています
$('<img />', {
"src": $("#img").attr("src")
}).load(function(){
// Do something
});
于 2013-06-24T17:10:41.270 に答える
5
私が見つけた解決策https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 （このコードはコメントから直接取得）
var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;
于 2017-06-22T14:01:48.923 に答える
4
GUSの例の変更：
$(document).ready(function() {
var tmpImg = new Image() ;
tmpImg.onload = function() {
// Run onload code.
} ;
tmpImg.src = $('#img').attr('src');
})
オンロードの前後にソースを設定します。
于 2010-10-06T21:36:29.483 に答える
3
imgオブジェクトが定義された後、別の行にsrc引数を再度追加するだけです。これにより、IEがだまされてlad-eventがトリガーされます。醜いですが、これまでに見つけた最も簡単な回避策です。
jQuery('<img/>', {
src: url,
id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE
于 2013-11-14T15:59:01.270 に答える
1
e.target.widthが未定義になるIEでこの問題が発生しました。loadイベントは発生しますが、IEで画像のサイズを取得できませんでした（chrome + FFが機能しました）。
e.currentTarget.naturalWidthとe.currentTarget.naturalHeightを探す必要があることがわかりました。
繰り返しになりますが、IEは独自の（より複雑な）方法で処理を実行します。
于 2012-10-12T08:04:02.410 に答える
1
あなたがこのようにしたいのなら、私はあなたに少しのヒントを与えることができます：
<div style="position:relative;width:100px;height:100px">
<img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
<img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>
ブラウザが画像をキャッシュするときにこれを行うと、常にimgが表示されるのに問題はありませんが、実際の画像の下にimgをロードします。
于 2012-02-13T03:10:44.493 に答える
0
JAILプラグインを使用して問題を解決できます。このプラグインを使用すると、画像を遅延読み込みして（ページのパフォーマンスを向上させ）、コールバックをパラメーターとして渡すこともできます。
$('img').asynchImageLoader({callback : function(){...}});
HTMLは次のようになります
<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />
于 2011-01-09T10:17:05.197 に答える
-1
純粋なCSSソリューションが必要な場合は、このトリックが非常にうまく機能します。変換オブジェクトを使用してください。これは、画像がキャッシュされているかどうかに関係なく機能します。
CSS：
.main_container{
position: relative;
width: 500px;
height: 300px;
background-color: #cccccc;
}
.center_horizontally{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
.center_vertically{
position: absolute;
top: 50%;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
transform: translate(0,-50%);
}
.center{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
transform: translate(-50%,-50%);
}
HTML：
<div class="main_container">
<div class="center_horizontally"></div>
<div class="center_vertically"></div>
<div class="center"></div>
</div>
</div
于 2016-06-10T18:35:44.173 に答える