jQuery et Ajax Chargement d'images

Question

J'ai un site avec un portfolio géant avec une tonne d'images haute résolution.

Je ne veux pas redimensionner ces images, mais j'aimerais pouvoir les afficher en mode asynchrone.

Sors jQuery .ajax

Mais mon code est erroné, en quelque sorte. Ce qu'il fait est semble tirer dans la page, au lieu de l'image "src"

peut vous aider à:

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

et PHP:

$path = $_GET['i']; 

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

tags d'image sont simplement: <img src="http://example.com/images/image.ext" />

Qu'est-ce que je fais mal ici? et comment puis-je le réparer?

Answer 1

Comme je l'ai mentionné dans mon commentaire, je ne vois pas comment cela ferait ce que vous voulez mais pour résoudre votre problème actuel: Il est probablement causé en raison de this dans le contexte de la fonction success, n'est pas la même que la this dans le contexte de votre each() fonction.

Vous devez enregistrer l'élément afin que vous puissiez y accéder à la fonction 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); 
     } 
    }); 
}); 

Edit: Il n'y a pas vraiment besoin d'utiliser ici ajax/php pour définir la source de l'image. Vous pouvez également générer des images en javascript (par lots), ajouter une fonction onload() pour les images et définir la source de vos éléments html quand ils sont chargés, puis obtenir le lot suivant. Voir par exemple cette question: JavaScript: Load an image from javascript then wait for the "load" event of that image

Answer 2

Votre page php obtient une erreur car vous ne transmettez rien pour le paramètre i. Votre php lance donc une erreur 404 - une réponse HTML complète.

Je pense que vous avez une erreur de syntaxe javascript qui est à l'origine ceci:

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

Remplacez cette ligne par:

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