Heim

JS-Spezialeffekte

jQuery-Effekte

jQuery的图片懒加载代码

Jetzt downloaden Vorschau

js代码
<script src="js/jquery.min.js"></script>
<script>
var _content = []; //临时存储li循环内容
var moreload = {
_default:10, //默认显示图片个数
_loading:5, //每次点击按钮后加载的个数
init:function(){
var lis = $(".moreload .hidden li");
$(".moreload ul.list").html("");
for(var n=0;n<moreload._default;n++){
lis.eq(n).appendTo(".moreload ul.list");
}
$(".moreload ul.list img").each(function(){
$(this).attr('src',$(this).attr('realSrc'));
})
for(var i=moreload._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
$(".moreload .hidden").html("");
},
loadMore:function(){
var mLis = $(".moreload ul.list li").length;
for(var i =0;i<moreload._loading;i++){
var target = _content.shift();
if(!target){
$('.moreload .more').html("<p>全部加载完毕...</p>");
break;
}
$(".moreload ul.list").append(target);
$(".moreload ul.list img").eq(mLis+i).each(function(){
$(this).attr('src',$(this).attr('realSrc'));
});
}
}
}
moreload.init();
</script>

Haftungsausschluss

Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn

Verwandter Artikel

基于jquery的图片懒加载js_jquery

16 May 2016

在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载.

So implementieren Sie das automatische Laden von Bildern mit js und jquery (Code im Anhang)

14 Apr 2018

Dieses Mal zeige ich Ihnen, wie Sie Bilder automatisch mit js und jquery laden (mit angehängtem Code). Hier ist ein praktischer Fall.

HTML, CSS und jQuery: Tipps zum verzögerten Laden von Bildern

24 Oct 2023

HTML, CSS und jQuery: Tipps zum Implementieren des verzögerten Ladens von Bildern In modernen Websites ist das verzögerte Laden von Bildern eine gängige Optimierungstechnik, die die Ladeleistung der Website verbessern und die Belastung des Servers verringern kann. Durch das verzögerte Laden von Bildern können Sie Bandbreite sparen und das Laden von Seiten beschleunigen, indem Sie Bilder nur dann laden, wenn der Benutzer zum sichtbaren Bereich scrollt. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery das verzögerte Laden von Bildern implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. HTML-Struktur Zunächst in HTML I

Wie man HTML, CSS und jQuery verwendet, um fortgeschrittene Techniken zum verzögerten Laden von Bildern zu implementieren

28 Oct 2023

Verwendung von HTML, CSS und jQuery zur Implementierung fortschrittlicher Techniken zum verzögerten Laden von Bildern (LazyLoading) ist ein technisches Mittel zur Verbesserung der Leistung von Webseiten, das sich besonders für Webseiten eignet, die eine große Anzahl von Bildern enthalten. Durch die Verwendung von HTML, CSS und jQuery können wir das verzögerte Laden von Bildern problemlos implementieren, um das Laden von Webseiten zu beschleunigen und die Benutzererfahrung zu verbessern. In diesem Artikel wird erläutert, wie diese drei Technologien zur Implementierung erweiterter Techniken zum verzögerten Laden von Bildern verwendet werden, und es werden spezifische Codebeispiele aufgeführt. 1. HTML-Vorbereitungsarbeiten in

Wie implementiert man das verzögerte Laden von Bildern in Vue?

25 Aug 2023

Wie implementiert man das verzögerte Laden von Bildern in Vue? Lazy Loading (oder Lazy Loading) ist eine Technik zur Optimierung der Webseitenleistung, insbesondere für Websites, die viele Bilder laden. In Vue können wir das verzögerte Laden von Bildern über Vue-Anweisungen implementieren. In diesem Artikel wird erläutert, wie Sie mit dem Lazy-Loading-Plugin von Vue das Lazy-Loading von Bildern implementieren und entsprechende Codebeispiele bereitstellen. 1. Plug-Ins installieren und einführen Zuerst müssen wir ein Vue-Lazy-Loading-Plug-In installieren. In diesem Artikel verwenden wir das Plugin vue-lazyload. OK

js或者jquery判断图片是否加载完成实现代码_javascript技巧

16 May 2016

需要获得图片的宽度和高度，有些js或者jquery代码在还没有加载完图片时就执行了，这个问题该怎么解决呢？接下来分别介绍下js与jquery提供的方法

Best Practice für die Implementierung des verzögerten Ladens von Bildern in Vue

09 Jun 2023

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist die Webseitengeschwindigkeit nach und nach zu einem Schlüsselindikator geworden, der sich auf das Benutzererlebnis auswirkt. Um die Ladegeschwindigkeit von Webseiten zu verbessern, erwägen wir normalerweise die Verwendung eines verzögerten Ladens von Bildern. Beim verzögerten Laden von Bildern werden Bilder geladen, wenn die Seite zu einer bestimmten Position gescrollt wird. Dadurch kann das Problem des gleichzeitigen Ladens einer großen Anzahl von Bildern vermieden werden, was dazu führt, dass die Seite zu langsam geladen wird. In diesem Artikel werden die Best Practices für die Verwendung von Vue zur Implementierung des verzögerten Ladens von Bildern vorgestellt. 1. Einführung in die Drittanbieter-Bibliothek vue-lazyload Das Vue-Framework selbst bietet keine Funktion zum verzögerten Laden von Bildern.

Umschaltender Bildfunktionscode, implementiert durch jQuery css_jquery

16 May 2016

In diesem Artikel wird hauptsächlich der von jQuery CSS implementierte Funktionscode zum Wechseln von Bildern vorgestellt und die damit verbundenen Techniken beschrieben, mit denen jQuery den Stil von Seitenelementen als Reaktion auf Mausereignisse dynamisch ändert. Freunde in Not können sich auf Folgendes beziehen

jQuery implementiert die Methode zum Ändern der Bildgröße nach dem Laden des Bildes_jquery

16 May 2016

In diesem Artikel wird hauptsächlich die Methode von jQuery zum Ändern der Bildgröße nach dem Laden des Bildes vorgestellt. Er analysiert die damit verbundenen Fähigkeiten des jQuery-Bildstils und der dynamischen Bedienung von Seitenelementattributen in Form von Beispielen

See all articles