Utilisez des composants simples de préchargement d'images pour améliorer l'expérience utilisateur des pages mobiles HTML5 _Compétences du didacticiel HTML5

Lorsque vous travaillez sur des pages mobiles h5, je pense que vous devez avoir rencontré une situation dans laquelle la page a été ouverte, mais les images à l'intérieur n'ont pas été chargées. Bien que ce problème n'affecte pas le fonctionnement de la page, il n'est pas propice. à l’expérience utilisateur. Quelle que soit la vitesse du réseau, il existe de nombreuses façons de résoudre ce problème : la plus basique consiste à optimiser les performances sous des aspects tels que la fusion des requêtes HTTP, la gestion du cache, la compression des images, etc. ; l'autre consiste à prétraiter toutes les images utilisées dans Dans le processus de chargement, lorsque l'utilisateur ouvre la page, le premier écran ne s'affiche pas immédiatement. Au lieu de cela, l'effet de chargement des ressources est affiché en premier, puis le contenu principal de la page est affiché une fois le chargement terminé. peut résoudre le problème. Bien que cet effet de chargement prenne du temps de navigation de l'utilisateur, nous pouvons le rendre plus beau et plus intéressant, afin qu'il n'affecte pas l'expérience utilisateur. Cet article met en œuvre cette idée et fournit un composant de préchargement d'image très simple. Il est simple à mettre en œuvre et ne présente pas de fonctionnalités faibles. Il devrait vous servir de référence lors de la création de pages mobiles.
Effet :

1. Idées de mise en œuvre

La balise img en HTML et background-imag en CSS déclencheront le navigateur pour charger l'image associée. Cependant, si l'image a déjà été chargée, le navigateur utilisera directement l'image chargée, elle peut donc être rendue sur le. page instantanément. Grâce à javascript, créez des objets Image, puis définissez l'attribut src de ces objets sur l'adresse de l'image à charger, ce qui peut également déclencher le chargement de l'image par le navigateur. Vous pouvez l'utiliser pour réaliser la fonction de préchargement de l'image : utilisez d'abord. ceux liés à la page. Masquez les éléments de l'image, puis utilisez js pour charger l'image, attendez que toutes les images soient chargées, puis affichez les éléments cachés. Cependant, ce n'est qu'une idée de base d'implémentation. Pour compléter un composant de préchargement avec une fonction plus robuste, il reste encore trois problèmes :
1) Problème de progression
Puisque le préchargement est effectué en même temps, un composant de préchargement doit également être effectué. L'effet est que la progression du chargement doit être notifiée au contexte externe en temps réel. Il existe deux façons d'implémenter la progression. La première est la taille des données chargées/taille totale des données, et la seconde est le nombre de fichiers chargés/nombre total de fichiers. Dans le navigateur, il n'est pas réaliste d'utiliser la première méthode. Il n'y a pas de méthode native pour le faire, nous ne pouvons donc utiliser que la deuxième méthode.
2) Le problème de l'échec du chargement des images
Par exemple, s'il y a 4 images, 50% d'entre elles ont été chargées, et une erreur se produit lors du chargement de la troisième image Si la progression est renvoyée à 75%. ? La réponse est : oui. Si cela n'est pas fait, la progression n'atteindra jamais 100 % et le contenu principal de la page n'aura aucune chance de s'afficher. Même si le chargement de l'image peut échouer, cela n'a rien à voir avec le chargeur. Peut-être que l'image elle-même échoue. n'existe pas ? Cela signifie que l’échec du chargement de l’image ne devrait pas affecter la fonctionnalité du chargeur.
3) Le problème du délai de chargement de l'image
L'image ne peut pas être chargée trop longtemps, sinon l'utilisateur restera dans l'effet de chargement et ne pourra pas voir le contenu principal, et le temps d'attente de l'utilisateur sera prolongé de manière incontrôlable, ce qui entraînera dans une baisse de l'expérience utilisateur. Cela va à l'encontre de l'intention initiale du chargeur. Par conséquent, un délai d'attente de chargement doit être défini pour chaque image. Si le chargement n'est pas terminé après l'expiration du délai de toutes les images, le chargement doit être activement abandonné, le contexte externe doit être informé que le chargement est terminé et le contenu principal doit être informé. affiché.
Sur la base des exigences ci-dessus, la mise en œuvre fournie dans cet article est :

Code JavaScriptCopier le contenu dans le presse-papiers

1. (fonction () {    
2. fonction isArray(obj) {    
3. return Object.prototype.toString.call(obj) === '[object Array]' ;    
4. }    
5. /**
6. * @param imgList Liste des adresses d'images à charger, ['aa/asd.png','aa/xxx.png']
7. * @param callback Le rappel après chaque image est chargé avec succès, et le "nombre total d'images chargées/nombre total d'images à charger" est transmis pour indiquer la progression
8. * @param timeout Le délai d'attente pour le chargement de chaque image, la valeur par défaut est de 5 s
9. */    
10. var loader = fonction (imgList, callback, timeout) {    
11. délai d'expiration = délai d'expiration || 5000 ;    
12. imgList = isArray(imgList) && imgList || [] ;    
13. callback = typeof(callback) === 'function' && callback;    
14. var total = imgList.length,    
15. chargé = 0,    
16. images = [],    
17. _on = fonction () {    
18. chargé < total && ( chargé, rappel && rappel (chargé / total));    
19. } ;    
20. si (!total) {    
21. retour rappel && rappel(1);    
22. }    
23. pour (var i = 0; i < total; i ) {    
24. images[i] = nouveau Image();    
25. images[i].onload = images[i].onerror = _on;    
26. images[i].src = imgList[i];    
27. }    
28. /**
29. * S'il y a encore des images qui n'ont pas été chargées dans le délai d'attente * plage de temps totale (la condition de jugement est chargée < total), informez l'environnement externe que toutes les images ont été chargées
30. * Le but est d'éviter aux utilisateurs d'attendre trop longtemps
31. */    
32. setTimeout(fonction () {    
33. chargé < total && (chargé = total, rappel && rappel (chargé / total));    
34. }, délai d'expiration * total );    
35. };
36. "fonction" === typede définir && définir.cmd définir(fonction () {
37. retour chargeur
38. }) : window.imgLoader = chargeur;
39. })();

Utilisation (correspondant à test.html dans le code) :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <script src="../js/ imgLoader.js">script> 
2. <script> 
3. imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(pourcentage){
4. console.log(pourcentage)
5. });
6. script> 

Résultat de l'exécution :

2. Description de la démo
L'effet donné au début de cet article, la page correspondante est index.html, il y a deux problèmes qui doivent être résolus. être expliqué à propos de cet effet :
1) Il utilise l'idée d'écran coulissant introduite dans le blog précédent Principe du carrousel Hammer.js pour implémenter une simple fonction d'écran coulissant, et enveloppe une partie de sa logique dans le balayage. js, Une variable globale Swipe est fournie au monde extérieur. Ce module a une méthode init afin que les fonctions liées à l'écran coulissant puissent être initialisées en externe en appelant Swipe.init(). À l'origine, cette méthode init n'était pas fournie. sera initialisé après le chargement de la fonction js, avec cette méthode d'initialisation, la logique de l'écran coulissant peut être retardée jusqu'à ce que le chargement soit terminé pour s'initialiser. index.html fait référence à un total de 5 js :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <script src="js/zepto.js ">script>    
2. <script src="js/ transition.js">script>    
3. <script src="js/ marteau.js">script>    
4. <script src="js/ imgLoader.js">script>    
5. <script src="js/ swipe.js">script>   

Avec imgLoader.js, vous pouvez utiliser la fonction imgLoader.js, et js avec swipe.js. Il s'agit d'un système de gestion des ressources humaines pour les utilisateurs de Hammer.js.滑屏功能了解相关内容。不过滑屏不是本文的重点，不了解swipe.js不会影响理解本文的内容~
2 ）虽然我在demo中用到了3张比较大的图片，但是由于在本地环境，加载速度还是非常快，所以一开始的时候，很难看到预加载的效果，最后只能想办法在每个进度回调之前做一下延迟，这才可以看到前面gif图片一开始的那个chargement效果，实现方式是：

Code XML/HTML复制内容到剪贴板

1. //模拟加载慢的效果    
2. var rappels = [];    
3. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (pourcentage) {    
4. var i = rappels.length;    
5. callbacks.push(function(){    
6. setTimeout(function(){    
7. var percentT = pourcentage * 100 ;    
8. $('#loader__info').html('Loading '   (parseInt(percentT))    '%');    
9. $('#loader__progress')[0].style.width = percentT   '%';    
10. si (pourcentage == 1) {    
11. setTimeout(function(){    
12. $('#loader').remove();    
13. Swipe.init();    
14. }, 600 );    
15. }    
16. rappels[i   1] && rappels[i   1]();    
17. },600) ;    
18. });    
19. si(pourcentage == 1) {    
20. rappels[0]();    
21. }    
22. });   

在真实环境，最好还是不要刻意去加这种延迟，没必要为了让用户看到一个好看有趣的加载效果，就浪费它不必要的等待时间，所以真实环境还是应该用下面的代码：

Code XML/HTML复制内容到剪贴板

1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (pourcentage) {    
2. var percentT = pourcentage * 100 ;    
3. $('#loader__info').html('Loading '   (parseInt(percentT))    '%');    
4. $('#loader__progress')[0].style.width = percentT   '%';    
5. si (pourcentage == 1) {    
6. $('#loader').remove();    
7. Swipe.init();    
8. }    
9. });   

3. 注意事項
預先載入是一種比較常見的實現效果，但是在使用的時候，有些問題需要注意：
1）什麼時候用
頁面大的時候用，一般頁面大小超過3M就該考慮使用；頁內包含數據量比較大的圖片，在手機端測試能夠明顯看到加載緩慢的時候，可以考慮使用。
2）盡量使用sprite圖片
3）加載效果實現的時候，盡量不用圖片，即使要用也應該用很小的圖片，否則加載效果卡在那就沒有意義了。
4. 總結
本文主要介紹了一個簡單的圖片預加載器，可應用於h5移動頁面的開發當中，在它的思路之下，如果有必要的話，還可以對它進行一些改造，用它來加載其它類型的資源，比如音頻或者視頻文件，畢竟這些類型的DOM對像也都有提供類似Image對象的屬性和回調。與預先載入的方式相反的，還有一種圖片懶加載的技術，現在網上已經有比較好用的jquery插件了，不過還是很值的去深入了解下它的思路跟實現要點，等我有時間去研究研究。同時感謝大家一直以來對腳本之家網站的支持！