Question

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

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

}); // end each

然而代码不起作用，我看不到图像。我得到了404

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

问题2：另外，我可以阻止在DIV id = gallery元素中对图像和锚点进行硬编码吗？我可以动态加载这些网址并创建图像和锚点，比如来自JSON字符串吗？

基本上我想要一个空div

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

并使用JSON结果填充

Answer 1

您的第一个问题可能与此问题有关：How to remedy imgur 403 forbidden errors?
实际上imgur会回复403 Forbidden如果您链接的网站由于某种原因被禁止（过去违反TOS）。

第二个问题可以通过简单的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字符串，它是图片网址的数组，当你想要填充你的图库时，你必须调用它。例如：

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

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

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

Answer 2

不确定为什么问题1是个问题。关于浏览器缓存的东西。请参阅上面的评论。关于问题2，您当然可以使用JSON字符串来提供数据。我假设你要从网址中提取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>');
    });
});

Answer 3

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

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

小图像缩略图不起作用

3 个答案: