Question

我想在我的页面上显示远程图像。我使用Bootstrap 2.3.2 Carousel。所有信息都来自其他网站的RSS源。我将数据放入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;
    }
}

我想在旋转木马中显示最大的现有图片。

如何异步使用jQuery获取远程图像？

0 个答案: