Maison >interface Web >js tutoriel >Comment définir des délais d'attente pour le chargement asynchrone d'images avec jQuery ?

Comment définir des délais d'attente pour le chargement asynchrone d'images avec jQuery ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-12 07:31:01353parcourir

How to Set Timeouts for Asynchronous Image Loading with jQuery?

Chargement asynchrone des images avec jQuery

Il est essentiel de charger les images de manière asynchrone pour éviter de bloquer le rendu de la page et garantir une expérience utilisateur fluide. Bien que $.ajax() soit un outil précieux pour les opérations asynchrones, il n'est pas explicitement conçu pour le chargement d'images.

Utilisation de la méthode .load de jQuery

jQuery fournit un outil .load pratique. Méthode load() qui peut charger du contenu externe, y compris des images. Cependant, définir un délai d'attente pour le chargement de l'image n'est pas simple à l'aide de .load().

Alternative à l'aide d'un élément d'image natif

Une approche alternative consiste à créer un nouvel élément d'image directement et définissez son attribut source. Cela permet plus de flexibilité dans la gestion du chargement des images.

Définition d'un délai d'expiration

Pour définir un délai d'expiration pour le chargement asynchrone des images, suivez ces étapes :

  1. Créez l'élément d'image :

    var img = $("<img />");
  2. Définissez l'attribut source :

    img.attr('src', 'http://somedomain.com/image.jpg');
  3. Gérer l'événement de chargement :

    img.on('load', function() {
        // Checks if the image has loaded successfully
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            // Image failed to load
            alert('broken image!');
        } else {
            // Image loaded successfully
            $("#something").append(img);
        }
    });

Lorsque l'image est chargée avec succès, vous pouvez l'ajouter à l'emplacement souhaité dans votre HTML. Si l'image ne parvient pas à se charger (par exemple, 404), vous pouvez gérer l'erreur comme bon vous semble.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn