jQuery 加载图像时的回调 /即使图像缓存了/

赞同来自:

如果一个

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 

 }

}/;

注意改变
http://api.jquery.com/bind/
在
http://api.jquery.com/one/
, 这样事件处理程序没有两次开始。

诸葛浮云

赞同来自:

我可以向您重新启动它是否进入图像的对象 DOM? 如果它缓存，它就不花太多时间，而且 onload 一切都会起作用。如果它不缓存，则在加载图像时它将开始 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'/ ;

 }/ ;

}/ ;

君笑尘

赞同来自:

我的简单解决方案，它不需要任何外部插件，对于普通情况应该足够：

/**

 * 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/;

}/;

奔跑吧少年

赞同来自:

你真的必须用它 jQuery? 您也可以附上一个活动。

onload

直接到你的形象;

<img onload="doStuff/this/;" src="/path/to/image.jpg"/>

每次加载图像时都会工作，从缓存中工作。

莫问

赞同来自:

您还可以使用下载错误使用此代码：

$/"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//;

 }

}/;

卫东

赞同来自:

我刚刚出现了这个问题，我正在寻找一个地方的解决方案，这些解决方案不会包括毁灭我的缓存或插件加载。

我没有立即看到这个话题，所以我发现了别的东西是一个有趣的更正 /我认为/ 这里的体面出版物：

$/'.image'/.load/function//{

 // stuff

}/.attr/'src', 'new_src'/;

事实上，我从这里评论中得到了这个想法：
http://www.witheringtree.com/2 ... uery/
/

我不知道它为什么工作，但我检查了它 IE7 在它工作之前他破产的地方。

我希望它会有所帮助

编辑

接受的答案实际上解释了原因：

如果一个 src 已安装，事件在连接事件处理程序之前启动在缓存盒中。

八刀丁二

赞同来自:

使用 jQuery 生成新图像 src 图像和分配方法 load 直接给他，方法 load 成功打电话 jQuery 完成新图像的生成。它适合我 IE 8, 9 和 10

$/'<img/>', {

 "src": $/"#img"/.attr/"src"/

}/.load/function//{

 // Do something

}/;

郭文康

赞同来自:

我发现的决定
https://bugs.chromium.org/p/ch ... 23c12
/此代码直接从评论中获取。/

var photo = document.getElementById/'image_id'/;

var img = new Image//;

img.addEventListener/'load', myFunction, false/;

img.src = 'http://newimgsource.jpg';

photo.src = img.src;

诸葛浮云

赞同来自:

例如，修改 GUS H。 :

$/document/.ready/function// {

 var tmpImg = new Image// ;

 tmpImg.onload = function// {

 // Run onload code.

 } ;



tmpImg.src = $/'#img'/.attr/'src'/;

}/

在下载之前和之后安装源。

窦买办

赞同来自:

只是重新添加一个论点 src 在确定对象后在一个单独的行中 img. 这将是一个欺骗 IE 导致事件 lad-event. 这是丑陋的，但这是我到目前为止发现的最简单的解决方法。

jQuery/'<img/>', {

 src: url,

 id: 'whatever'

}/

.load/function// {

}/

.appendTo/'#someelement'/;

$/'#whatever'/.attr/'src', url/; // trigger .load on IE

石油百科

赞同来自:

如果你想这样做，我可以给你一个小建议：

<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 在真实的图片下。

江南孤鹜

赞同来自:

我有这个问题 IE, 在哪里 e.target.width 这将是不确定的。下载事件将工作，但我无法获得图像尺寸 IE /chrome + FF 工作/.

事实证明你需要寻找

e.currentTarget.naturalWidth

&

e.currentTarget.naturalHeight

.

再次， IE 让自己做出自己的事 /更复杂/ 道路。

冰洋

赞同来自:

您可以用插件来解决您的问题 JAIL, 这也允许懒洋地上传图像 /提高页面性能/ 和传输

背部

称为参数

$/'img'/.asynchImageLoader/{callback : function//{...}}/;

HTML 必须是那样的

<img height="height" name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width"/>

小明明

赞同来自:

如果你需要一个干净的决定 CSS, 这个技巧很好地使用了对象 transform. 它还在缓存时与图像一起使用：

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:

[code]<div class="main_container">
<div class="center_horizontally"></div>
<div class="center_vertically"></div>
<div class="center"></div>
</div>

jQuery 加载图像时的回调 /即使图像缓存了/

14 个回复

发起人

相关问题

问题状态

jQuery 加载图像时的回调 /即使图像缓存了/

与内容相关的链接

14 个回复

发起人

相关问题

问题状态