Méthodes d'optimisation du chargement des images dans les projets front-end

Cette fois, je vais vous présenter la méthode d'optimisation du chargement des images dans le projet front-end. Quelles sont les précautions pour la méthode d'optimisation du chargement des images dans le projet front-end. Ce qui suit est un cas pratique. , jetons un coup d'oeil.

Les images constituent une partie très importante de l'effet d'affichage de l'interface. Le chargement des images est lié à l'expérience utilisateur et aux performances des applications. Les stratégies courantes pour optimiser le chargement des images sont : le préchargement et le chargement paresseux.

Le préchargement d'images peut améliorer l'expérience utilisateur, ce qui est particulièrement important pour les galeries d'images et le contenu Web contenant une grande proportion d'images

Préchargement CSS

Utilisez le CSS background L'attribut peut précharger les images, mais ne pas les afficher dans la position de l'écran. Si les chemins sont cohérents lors de l'utilisation de ces images, le navigateur donnera la priorité au chargement des images dans le cache pour l'affichage, atteignant ainsi l'objectif de préchargement
.

#preload-img{
background: url(http://example.com/image.png) no-repeat -9999px -9999px;
}

Mais cette méthode affectera l'affichage d'autres contenus lors du premier chargement de la page. Vous pouvez ajouter du js

window.onload = function () {    let preload = document.createElement('div');
    preload.id = 'preload';    document.body.appendChild(preload);
}

Préchargement pur js

Utiliser. js pour instancier l'objet image. Attribuez ensuite l'adresse de l'application pour réaliser le préchargement d'images par lots

window.onload = function () {    let images = [        'http://example.com/image1.png',        'http://example.com/image2.png',        'http://example.com/image3.png',
    ];
    images.forEach((src) => {
        preload(src);
    })
}let preload = src => {    let img = new Image();
    img.src = src;
}

chargement paresseux

Le chargement paresseux des images peut soulager la pression sur le serveur. avant Pour une page très longue, nous espérons que l'image sera chargée lorsque l'utilisateur navigue vers la zone correspondante. Une solution courante consiste à utiliser l'attribut data-src sur l'élément img pour remplacer src et déterminer que l'élément img est dynamique. lorsque l'utilisateur

zone visible

Attribuez l'attribut src pour afficher l'image correspondante. S'il s'agit d'une page de mur d'images, afin d'éviter de charger toutes les images, vous devez définir la hauteur par défaut de l'image

Définir l'événement de défilement

let imageEle = (function(){    let node = document.createElement('img');    document.body.appendChild(node);    return {        setSrc:function(src){
            node.src = src;
        }
    }
})();//代理对象let proxy = (function(){    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };    return {        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();
proxy.setSrc('example.png');

L'événement de défilement peut être enregistré La fonction de flux est encore optimisée

L'utilisation correcte du chargement d'image peut améliorer l'expérience utilisateur, garantir l'effet d'affichage de la page et en même temps soulager le pression sur le serveur dans une certaine mesure. C'est une partie qui est souvent impliquée dans l'optimisation frontale. Comprendre les solutions et les stratégies qui peuvent nous aider à créer de meilleurs produits.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

.img{    min-height: 400px;
}

Lecture recommandée :

let imgs = document.getElementsByTagName("img");let n = 0; //存储加载图片索引let lazyload= ()=> {    let cHeight = document.documentElement.clientHeight;    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
    for (let i = n,l = imgs.length; i < l; i++) {        let img = imgs[i];        if (img.offsetTop < cHeight + scrollTop) {
            img.src = img.src == &#39;loading.gif&#39;? img.getAttribute(&#39;data-src&#39;):img.src;
            n = i + 1;
        }
    }
}window.onscroll = lazyload;

Explication détaillée de l'héritage JS

Utilisation de la limitation des fonctions dans JS

Utilisez le code JS pour créer un effet de barrage

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!