3

我在 div 中创建了一堆锚点和图像，并使用以下代码加载它们：

$('#gallery img').each(function(i) {
    var imgFile = $(this).attr('src');      

}); // end each​​​​​

但是代码不起作用，我看不到图像。我得到一个 404

问题 1：你能检查一下有什么问题吗http://jsfiddle.net/u3vFG/

ISSUE 2:另外，我可以防止对 DIV id=gallery 元素中的图像和锚点进行硬编码吗？我可以动态加载这些 url 并创建图像和锚点，比如从 JSON 字符串吗？

基本上我想要一个空的 div

<div id="gallery">
    <!-- load images dynamically here -->
</div>​

并用 JSON 结果填充它

4

3 回答 3

1

您的第一个问题可能与这个问题有关：如何纠正 imgur 403 禁止错误？实际上，如果您链​​接的网站因某种原因被禁止（过去违反了 TOS），
imgur 会做出回应。403 Forbidden

第二个问题可以通过一个简单的jQuery.getJSON()调用来解决：

var url = "http://example.com/get_gallery_images_json.php";
$.getJSON(url, function(data) {
    $.each(data, function(idx, imgFile) {
        var a = $("<a>").attr("href", imgFile);
        $("<img>").attr("src", imgFile).appendTo(a);
        a.appendTo($("#gallery"));
    }); 
});

这里url必须返回一个 JSON 字符串，它是图像 url 的数组，当你想填充你的画廊时，你必须调用它。例子：

["http://example.com/image1.png", "http://example.com/image2.png"]

上面的 JSON 实际上是一个数组，而不是一个常规的对象。您可以在此处找到有关 JSON 的更多信息：JSON - 维基百科

编辑：添加了一些示例锚/图像附加实现和 JSON 字符串。

于 2012-11-10T11:52:01.770 回答
0

不知道为什么问题 1 是一个问题。关于浏览器缓存的一些事情。请参阅我上面的评论。关于问题 2，您当然可以使用 JSON 字符串来提供数据。我假设您要从 url 中提取 json 数据。我还将假设您的 JSON 结构现在只是文件名和 URL，例如 {"filename":"someurl"}。

$.getJSON('http://someurl.com/getmystuff', function(data) {
    var $gallery = $('#gallery');
    $.each(data, function(name, url) {
        $gallery.append('<a href="' + url + '"><img src="' + url + '" width="70" height="70"/></a>');
    });
});
于 2012-11-10T11:54:14.627 回答
0

我认为该网站受到了防盗链的保护。这意味着只有网站本身才能访问图像。

当您将图像链接粘贴到新选项卡中时，您有权访问和查看图像。然后图像缓存在浏览器中，当您刷新小提琴时，由于图像在浏览器缓存中可用，因此可以显示它们。

于 2012-11-10T11:55:47.120 回答