recherche
Maisondéveloppement back-endtutoriel phpjavascript - 有个文章中图片的懒加载lazyload.js的疑问?

有个文章中图片的懒加载lazyload.js的疑问?

修改目标img元素的src属性为orginal属性,从而中断图片的加载。

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

求大神指点啊!

回复内容:

有个文章中图片的懒加载lazyload.js的疑问?

修改目标img元素的src属性为orginal属性,从而中断图片的加载。

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

求大神指点啊!

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

图片lazyload就需要这样,这个和服务器没有任何关系。服务器端写正则干什么?

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

orginal属性指向原图就是达到这个目的的啊,orginal这个属性是img标签没有的,浏览器DOM解析器只是当成一个普通的用户自定义属性,不会将其当成src属性那样去加载图片信息

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

这段有点不理解,是可以通过监听页面滚动事件将lazyload激活,加载真实的图片数据,通过将orgina属性值赋给src属性

例如下:
初次页面加载的时候加载到的DOM元素是这样的
<img src="/static/imghwm/default1.png" data-src="loading.gif" class="lazy" orginal="realImageFilePath" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >
那么当页面加载的时候,回去加载loading.gif,而这个文件通常就很小,能够马上加载
这样当不需要图片显示的时候,例如图片在页面的中下部,用户还没有滚动到指定位置时候,这是的图片数据就不需要加载,减少页面流量及页面的渲染数据,window.onload事件监听能更快的得到响应。这个和documentonready事件无关。
当需要显示图片的时候,也就是用户滚动到页面特定位置的时候,通过JS将img的src属性指向orginal属性的值,同时可将orginal属性删除
<img src="/static/imghwm/default1.png" data-src="realImageFilePath" class="lazy" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >
此时img指向真实的地址,图片数据才开始加载

为什么要设置original属性来实现lazyload

<code>浏览器中几乎所有操作(除了网络操作)都是在单线程中进行的。网络操作可由多个并行线程执行。并行连接数是有限的(通常为 2 至 6 个,以 Firefox 3 为例是 6 个)。
主线程有个一个事件循环,是一个无限循环,永远处于接受处理状态,并等待 事件(如布局和绘制事件)发生,并进行处理。
那么图片资源的加载就是一个网络操作,当浏览器解析到一个img标签时,就会用src指定的网络地址去加载图片信息,而不是等到documentonready事件监听执行完毕后再去加载资源,所以为了实现lazyload(不加载真实的图片资源),需要设置一个自定义属性来保存真实地址,在需要显示的时候再设置到src属性上</code>

我们可以做个简单的实验,看src是不是会被加载请求:
如下:
页面执行后,我们能chrome的资源控制台能看到
Failed to load resource: the server responded with a status of 404 (Not Found)
的提示信息
所以错误的资源请求还是发生了

<code>


    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>
       //documentonready
        $(function(){
            //在其中修改src属性值,以期实现在documentonready中修改omg src为一个占位图片
            //而不加载真实图片数据
            $('img').each(function(index,item){
                $(item).attr("original",$(item).attr('src'));
                $(item).attr("src","http://sfault-avatar.b0.upaiyun.com/305/423/3054230534-561d20a868d2e_big64");
            });
        });

    </script>


<!--错误的图片地址-->
<img  src="/static/imghwm/default1.png" data-src="http://ubmcmm.baidustatic.com/media/v1/0f0005yYIsGLBGDGfPud1000001111.png" class="lazy" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >

</code>

lazyload 本身只是个辅助,当然其功能直接手写代码能实现. 你非要让它来完成它力所不能及的事情自然是不行的.

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
PHP: une introduction au langage des scripts côté serveurPHP: une introduction au langage des scripts côté serveurApr 16, 2025 am 12:18 AM

PHP est un langage de script côté serveur utilisé pour le développement Web dynamique et les applications côté serveur. 1.Php est un langage interprété qui ne nécessite pas de compilation et convient au développement rapide. 2. Le code PHP est intégré à HTML, ce qui facilite le développement de pages Web. 3. PHP traite la logique côté serveur, génère une sortie HTML et prend en charge l'interaction utilisateur et le traitement des données. 4. PHP peut interagir avec la base de données, traiter la soumission du formulaire et exécuter les tâches côté serveur.

PHP et le Web: explorer son impact à long termePHP et le Web: explorer son impact à long termeApr 16, 2025 am 12:17 AM

PHP a façonné le réseau au cours des dernières décennies et continuera de jouer un rôle important dans le développement Web. 1) PHP est originaire de 1994 et est devenu le premier choix pour les développeurs en raison de sa facilité d'utilisation et de son intégration transparente avec MySQL. 2) Ses fonctions principales incluent la génération de contenu dynamique et l'intégration à la base de données, ce qui permet au site Web d'être mis à jour en temps réel et affiché de manière personnalisée. 3) La large application et l'écosystème de PHP ont motivé son impact à long terme, mais il fait également face à des mises à jour de version et à des défis de sécurité. 4) Les améliorations des performances ces dernières années, telles que la sortie de PHP7, lui permettent de rivaliser avec les langues modernes. 5) À l'avenir, PHP doit faire face à de nouveaux défis tels que la conteneurisation et les microservices, mais sa flexibilité et sa communauté active le rendent adaptable.

Pourquoi utiliser PHP? Avantages et avantages expliquésPourquoi utiliser PHP? Avantages et avantages expliquésApr 16, 2025 am 12:16 AM

Les principaux avantages du PHP comprennent la facilité d'apprentissage, un soutien solide sur le développement Web, les bibliothèques et les cadres riches, les performances élevées et l'évolutivité, la compatibilité multiplateforme et la rentabilité. 1) Facile à apprendre et à utiliser, adapté aux débutants; 2) une bonne intégration avec les serveurs Web et prend en charge plusieurs bases de données; 3) ont des cadres puissants tels que Laravel; 4) Des performances élevées peuvent être obtenues grâce à l'optimisation; 5) prendre en charge plusieurs systèmes d'exploitation; 6) Open source pour réduire les coûts de développement.

Debunking the Mythes: PHP est-il vraiment une langue morte?Debunking the Mythes: PHP est-il vraiment une langue morte?Apr 16, 2025 am 12:15 AM

PHP n'est pas mort. 1) La communauté PHP résout activement des problèmes de performance et de sécurité, et PHP7.x améliore les performances. 2) PHP convient au développement Web moderne et est largement utilisé dans les grands sites Web. 3) PHP est facile à apprendre et le serveur fonctionne bien, mais le système de type n'est pas aussi strict que les langages statiques. 4) Le PHP est toujours important dans les domaines de la gestion du contenu et du commerce électronique, et l'écosystème continue d'évoluer. 5) Optimiser les performances via OPCACHE et APC et utilisez des modèles OOP et de conception pour améliorer la qualité du code.

Le débat PHP contre Python: quel est le meilleur?Le débat PHP contre Python: quel est le meilleur?Apr 16, 2025 am 12:03 AM

PHP et Python ont leurs propres avantages et inconvénients, et le choix dépend des exigences du projet. 1) PHP convient au développement Web, facile à apprendre, riche en ressources communautaires, mais la syntaxe n'est pas assez moderne, et les performances et la sécurité doivent être prêts attention. 2) Python convient à la science des données et à l'apprentissage automatique, avec une syntaxe concise et facile à apprendre, mais il y a des goulots d'étranglement dans la vitesse d'exécution et la gestion de la mémoire.

Objectif de PHP: Construire des sites Web dynamiquesObjectif de PHP: Construire des sites Web dynamiquesApr 15, 2025 am 12:18 AM

PHP est utilisé pour créer des sites Web dynamiques, et ses fonctions principales incluent: 1. Générer du contenu dynamique et générer des pages Web en temps réel en se connectant à la base de données; 2. Traiter l'interaction utilisateur et les soumissions de formulaires, vérifier les entrées et répondre aux opérations; 3. Gérer les sessions et l'authentification des utilisateurs pour offrir une expérience personnalisée; 4. Optimiser les performances et suivre les meilleures pratiques pour améliorer l'efficacité et la sécurité du site Web.

PHP: Gestion des bases de données et logique côté serveurPHP: Gestion des bases de données et logique côté serveurApr 15, 2025 am 12:15 AM

PHP utilise les extensions MySQLI et PDO pour interagir dans les opérations de base de données et le traitement de la logique côté serveur, et traite la logique côté serveur via des fonctions telles que la gestion de session. 1) Utilisez MySQLI ou PDO pour vous connecter à la base de données et exécuter les requêtes SQL. 2) Gérer les demandes HTTP et l'état de l'utilisateur via la gestion de session et d'autres fonctions. 3) Utiliser les transactions pour assurer l'atomicité des opérations de base de données. 4) Empêcher l'injection de SQL, utiliser les connexions de gestion des exceptions et de clôture pour le débogage. 5) Optimiser les performances via l'indexation et le cache, écrivez du code très lisible et effectuez une gestion des erreurs.

Comment empêchez-vous l'injection SQL en PHP? (Déclarations préparées, APD)Comment empêchez-vous l'injection SQL en PHP? (Déclarations préparées, APD)Apr 15, 2025 am 12:15 AM

L'utilisation de déclarations de prétraitement et l'APD dans PHP peut effectivement empêcher les attaques d'injection SQL. 1) Utilisez PDO pour vous connecter à la base de données et définir le mode d'erreur. 2) Créez des instructions de prétraitement via la méthode de préparation et transmettez des données à l'aide des espaces réservés et exécutez des méthodes. 3) Traitez les résultats de la requête et assurez la sécurité et les performances du code.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP