Question

我有一个拥有大量高分辨率图像的巨型投资组合的网站。

我不想调整这些图片的大小，但我希望能够将它们拉成异步。

出现jQuery .ajax

但我的代码错了，不知何故。它的作用似乎是拉入页面而不是图像“src”

你能帮忙吗？

// Load in the images via ajax:
var $imgs = $('.ajax-image');
$imgs.each(function(i){
    var $imgsrc = $(this).attr('src');
    var $url = '/php/pull-image.php?i=' + $imgsrc;
    $.ajax({
        url : $url,
        mimeType: "text/plain", 
        processData : false,
        cache: false,
        success: function (html) {
            $(this).attr('src', html);   
        }
   });
});

和PHP：

$path = $_GET['i'];

$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
echo 'data:image/' . $type . ';base64,' . base64_encode($data);

图片代码只是：<img src="http://example.com/images/image.ext" />

我在这里做错了什么？我该如何解决？

Answer 1

您的php页面收到错误，因为您没有为参数i传递任何内容。因此，您的php会抛出404错误 - 完整的HTML响应。

我认为您的javascript语法错误导致了这一点：

 url : '/php/pull-image.php?i=' . $imgsrc,

将此行替换为：

url : '/php/pull-image.php?i=' + '<?php echo json_encode($imgsrc); ?>' ,

Answer 2

正如我在评论中提到的那样，我不知道这会如何做到你想要的但是要解决你当前的问题：这可能是因为this在{{1}的上下文中引起的函数，与success函数的上下文中的this不同。

您应该保存元素，以便可以在each()函数中访问它：

success

编辑：这里没有真正需要使用ajax / php来设置图像的来源。您还可以使用javascript（批量生成）生成一些图像，为图像添加$imgs.each(function(i){ var el = $(this), $imgsrc = el.attr('src'), $url = '/php/pull-image.php?i=' + $imgsrc; $.ajax({ url : $url, mimeType: "text/plain", processData : false, cache: false, success: function (html) { el.attr('src', html); } }); });函数，并在加载时设置html元素的来源，然后进行下一批。例如，请参阅此问题：JavaScript: Load an image from javascript then wait for the "load" event of that image

jQuery和Ajax加载图像

2 个答案: