如何在 jQuery、WordPress 主题中从外部 URL 加载图像？

Question

我已经下载了 WordPress 主题，我想根据自己的需要对其进行修改。所以我的问题是：主题中有幻灯片，它正在加载一个接一个显示的图像。我在下面发布了代码，但我们感兴趣的部分是我们将位置分配给图像的部分。假设我只有一个图像：如果我的服务器上某处有该图像，如果我在服务器上为该图像添加位置的路径http://myServer/path/to/the/image.jpg，我可以将其加载到幻灯片中。我试过了，它工作正常。问题是我要加载的图像在另一个外部 URL 上，所以当我用 http://myOtherServer/path/to/the/image.jpg 替换该行时，图像没有显示。

我在控制台得到的错误是：

Uncaught Error: Syntax error, unrecognized expression: http://myOtherServer/path/to/the/image.jpg

这是我的 .php 脚本中的 jQuery 代码：

$j(document).ready(function(){     

    $j('#kenburns_overlay').css('width', $j(window).width() + 'px');
    $j('#kenburns_overlay').css('height', $j(window).height() + 'px');
    $j('#kenburns').attr('width', $j(window).width());
    $j('#kenburns').attr('height', $j(window).height());

    $j(window).resize(function() {
        $j('#kenburns').remove();
        $j('#kenburns_overlay').remove();

        $j('body').append('<canvas id="kenburns"></canvas>');
        $j('body').append('<div id="kenburns_overlay"></div>');

        $j('#kenburns_overlay').css('width', $j(window).width() + 'px');
        $j('#kenburns_overlay').css('height', $j(window).height() + 'px');
        $j('#kenburns').attr('width', $j(window).width());
        $j('#kenburns').attr('height', $j(window).height());
        $j('#kenburns').kenburns({
            images: "http://myServer/path/to/the/image.jpg", 
            frames_per_second: 30,
            display_time: 5000,
            fade_time: 1000,
            zoom: 1.2,
            background_color:'#000000'
        });
    });
    $j('#kenburns').kenburns({
        images: "http://myServer/path/to/the/image.jpg",  
        frames_per_second: 30,
        display_time: 5000,
        fade_time: 1000,
        zoom: 1.2,
        background_color:'#000000'
    });             
});

我也尝试添加：

var imgS = new Image();
imgS.src = 'http://myOtherServer/path/to/the/image.jpg';

然后将路径替换为：

images: imgS, 

它给了我错误：

Resource interpreted as Image but transferred with MIME type text/html: "<currentUrl>/object%20HTMLImageElement/".

顺便说一句。在我的 .php 脚本的顶部，我有：

header("content-type: application/x-javascript");

所以一般的问题是：如何在我的 jQuery 代码中获取存储在另一台服务器上的图像？

编辑 1：

这是kenburns 中可能请求图像的部分：

$.fn.kenburns = function(options) {
...

        var image_paths = options.images;
        var images = [];
        $(image_paths).each(function(i, image_path){
            images.push({path:image_path,
                         initialized:false,
                         loaded:false});
        });
...
}

编辑 2：

我还尝试创建 <img src="http://myOtherServer/path/to/the/image.jpg"/> 标记并将其作为对象传递，但我再次收到错误：

 Resource interpreted as Image but transferred with MIME type text/html: "<currentUrl>/object%20HTMLImageElement/".

Answer 1

试试这个

html

<div id="otherImages" style="display:none !important;">
<img src="http://myOtherServer/path/to/the/image.jpg" />
</div>

编辑

js（之前没试过$.fn.kenburns）

$j('#kenburns').kenburns({
        images: "http://webpage.domain" + "#otherImages",  
        frames_per_second: 30,
        display_time: 5000,
        fade_time: 1000,
        zoom: 1.2,
        background_color:'#000000'
    });