Javascript jQuery和Ajax加载图像

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

我不想调整这些图像的大小，但我希望能够异步拉取它们

出来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);

图像标记很简单：

---

我做错了什么？如何修复它？

您的php页面出现错误，因为您没有为参数

I

传递任何内容。因此，您的php抛出了一个

404

错误—一个完整的HTML响应

我认为您的javascript语法错误导致了以下情况：

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

将此行替换为：

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

url:'/php/pull image.php？i='+'，

正如我在评论中所提到的，我不知道这将如何满足您的需要，而是为了解决您当前的问题：这可能是由于

在
成功
函数的上下文中，此

与

每个（）函数的上下文中的
此
不同

您应该保存元素，以便可以在
success
功能中访问它：

$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);   
        }
   });
});

编辑：这里不需要使用ajax/php来设置图像的源代码。您还可以使用javascript（分批）生成一些图像，为图像添加
onload（）
函数，并在加载html元素时设置它们的源代码，然后获得下一批。例如，请参见以下问题：
这将如何提高性能？您的图像是html的一部分，因此它们在浏览器加载页面时被加载，只有在通过javascript再次加载后，您才替换源属性。如果您想对何时加载的内容产生影响，请不要将它们放在
src
属性中，而是放在
data src
属性中，这样浏览器就不会加载它们。console.log（b64data），以便在使用它之前检查服务器的响应。尝试这种方法头（“内容类型：image/”$type）；回显“数据：图像/”$类型'；base64'。base64_编码（$data）；对我刚刚注意到并修复了这个问题，现在URL正确地下拉了。。。但是imag src仍然没有被Base64取代
html
包含什么？执行
警报（html）。现在又回来了什么？嗯。。。我希望有一些非阻塞。我正在从我的博客（位于同一台服务器上）中提取这些图像。。。然而，我发现现在有更多的阻塞，而这些都是加载inI猜测我只是“ass”使用ajax应该与页面加载异步完成…@o7thWebDesign，您现在比以前有更多的阻塞（您不应该）？如果是这样的话，你应该发布一个新的问题和实际的代码和问题。实际上，我要用另一种方式来做。因为我是从我的博客中提取图像的，它位于同一台服务器上，所以我将在httpd.conf文件中为实际位置添加一个别名，然后像这样做。我还可以更多地利用这个网站的缓存等功能。@o7thWebDesign在我的回答中添加了另一个建议。