Maison > Article > interface Web > Un moyen de charger paresseusement des images avec jquery
Cet article présente principalement jquery pour implémenter le chargement asynchrone (une méthode de chargement paresseux d'images), qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
Introduisez d'abord le plug-in derrière jq
(function($) { // alert($.fn.scrollLoading); $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]); if(!url) { return; } var data = { obj: $(this), tag: node, url: url }; params.cache.push(data); }); var loading = function() { var st = $(window).scrollTop(), sth = st + $(window).height(); $.each(params.cache, function(i, data) { var o = data.obj, tag = data.tag, url = data.url; if(o) { post = o.position().top; posb = post + o.height(); if((post > st && post < sth) || (posb > st && posb < sth)) { if(tag === "img") { o.attr("src", url); } else { o.load(url); } data.obj = null; } } }); return false; }; loading(); $(window).bind("scroll", loading); }; })(jQuery);
puis initialisez-le en bas
$(document).ready(function () { //实现图片慢慢浮现出来的效果 $("img").load(function () { //图片默认隐藏 $(this).hide(); //使用fadeIn特效 $(this).fadeIn("5000"); }); // 异步加载图片,实现逐屏加载图片 $(".scrollLoading").scrollLoading(); });
Vous devez modifier la balise img en
<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />
data-url représente l'image à afficher chargé de manière asynchrone, et src représente la première image chargée Image (généralement une petite image ou une animation. Toutes les src de la page Web sont liées à la même image, de sorte que la page Web se charge beaucoup plus rapidement. À ce stade, l'image à charger est chargé de manière asynchrone, c'est la fonction dont je vais parler maintenant)
Recommandations associées :
Explication détaillée du chargement paresseux de l'image imgLazyLoading.js
Introduction à l'implémentation JavaScript du chargement paresseux d'images
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!