小图像缩略图不起作用答案

【问题标题】：Small Image Thumbnails not working小图像缩略图不起作用
【发布时间】：2012-11-10 20:45:42
【问题描述】：

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

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

}); // end each

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

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

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

基本上我想要一个空的 div

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

并用 JSON 结果填充它

【问题讨论】：

很奇怪。我也看不到它们，但是当我将图像网址复制并粘贴到新选项卡中然后刷新小提琴时，我可以看到它们。我必须先单独查看每张图片，然后缩略图才起作用。
是的，我也遇到了同样的问题..用新的小提琴试了一下，效果很好

标签： jquery

【解决方案1】：

您的第一个问题可能与这个问题有关：How to remedy imgur 403 forbidden errors?
实际上，如果您链接的网站因某种原因被禁止（过去违反了 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 - Wikipedia

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

【讨论】：

你能告诉我使用硬编码的 JSON 字符串吗..假设它预先填充了这些 url
另外，我将如何使用这个 JSON 字符串创建这些锚点和图像
添加了一些示例实现和一个数组的 JSON 字符串。
谢谢。我很难让你的样品运行。我在哪里胡闹？ jsfiddle.net/u3vFG/6
URL 必须像http://example.com/get_galley_images_json.php （假设你在服务器端使用PHP），调用它时，它会返回json 字符串。您正在使用 json 字符串作为 jsfiddle 中的 url。

【解决方案2】：

不知道为什么问题 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>');
    });
});

【讨论】：

你能告诉我使用硬编码的 JSON 字符串吗..假设它预先填充了这些 url

【解决方案3】：

我认为该网站受到hotlink 的保护。这意味着只有网站本身可以访问图像。

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

【讨论】：