![](/img/trans.png)
[英]How to load image asynchronously using jquery while animating pictures as screenshot
[英]How to get remote image using jQuery asynchronously?
我想在頁面上顯示一個遠程圖像。 我使用Bootstrap 2.3.2傳送帶。 所有信息都來自另一個網站的RSS feed。 我將數據放入div中,如下所示:
...
<div id="newsItem-<?php echo $i;?>" class="item" data-src="<?php echo $feed[$i]->image; ?>" data-alt="<?php echo $feed[$i]->title; ?>">
</div>
...
圖像加載時間太長。 頁面加載約15秒。 因此,我決定在頁面加載完成后加載圖像。
要顯示的圖片可能有各種尺寸。 我想展示現有的最大的一個。
對於每個新聞項,所有圖像可能具有不同但相似的尺寸,例如1024x768、620x350、528x350、527x350。
我已經編寫了一個jQuery腳本來實現這一目標,但是出了點問題。
jQuery(function () {
jQuery("div[id^='newsItem-']").each(function () {
var r = jQuery(this).attr("data-src");
var r620 = r.replace(".jpg", "-620x350.jpg");
var r527 = r.replace(".jpg", "-527x350.jpg");
var r1024 = r.replace(".jpg", "-1024x678.jpg");
var r528 = r.replace(".jpg", "-528x350.jpg");
var altImg = jQuery(this).attr("data-alt");
if (pictureExists(r1024)){
r = r1024;
}
else if (pictureExists(r620)){
r = r620;
}
else if (pictureExists(r528)){
r = r528;
}
else if (pictureExists(r527)){
r = r527;
}
jQuery(this).prepend("<img src='" + r + "' alt='" + altImg + "' />");
jQuery(this).removeAttr("data-alt");
jQuery(this).removeAttr("data-src");
});
});
function pictureExists(url) {
var img = new Image();
img.src = url;
if (img.height !== 0) {
return false;
} else {
return true;
}
}
我想在輪播中顯示最大的現有圖片。
在加載圖像之前,您無法知道圖像的高度/寬度。 因此,它是一個異步過程。
在pictureExists函數中嘗試以這種方式進行操作:
/ Create new image
var img = new Image();
// Create var for image source
var imageSrc = "http://example.com/blah.jpg";
// define what happens once the image is loaded.
img.onload = function() {
// Stuff to do after image load ( jQuery and all that )
// Within here you can make use of src=imageSrc,
// knowing that it's been loaded.
};
// Attach the source last.
// The onload function will now trigger once it's loaded.
img.src = imageSrc;
如果要使用上述方法,則必須實現promise結構,以解決圖像加載的異步特性以獲取高度/寬度
或者您可以使用這個小插件。 https://github.com/desandro/imagesloaded
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.