當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery实现图片懒加载

發(fā)布時(shí)間：2023/12/31 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery实现图片懒加载小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

實(shí)現(xiàn)一個(gè)懶加載，效果如上所示

HTML

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>測試懶加載</title> </head> <style>ul,li {list-style: none;}.container {width: 600px;margin: 0 auto;}.container li {float: left;margin: 10px 10px;}.container li img {width: 240px;height: 180px;}p {float: left;} </style><body><ul class="container"><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li><li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li></ul> </body><script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script> <script>var clock; //這里的clock為timeID，$('.container img').each(function () {if (checkShow($(this)) && !isLoaded($(this))) {loadImg($(this));}})lazyRender();$(window).on('scroll', function () {if (clock) { // 如果在300毫秒內(nèi)進(jìn)行scroll的話，都會被clearTimeout掉，setTimeout不會執(zhí)行。//如果有300毫秒外的操作，會得到一個(gè)新的timeID即clock，會執(zhí)行一次setTimeout,然后保存這次setTimeout的ID，//對于300毫秒內(nèi)的scroll事件，不會生成新的timeID值，所以會一直被clearTimeout掉，不會執(zhí)行setTimeout.clearTimeout(clock);}clock = setTimeout(function () {console.log('運(yùn)行了一次');lazyRender();}, 300)})function lazyRender() {$('.container img').each(function () {if (checkShow($(this)) && !isLoaded($(this))) {loadImg($(this));}})}function checkShow($img) { // 傳入一個(gè)img的jq對象var scrollTop = $(window).scrollTop(); //即頁面向上滾動的距離var windowHeight = $(window).height(); // 瀏覽器自身的高度var offsetTop = $img.offset().top; //目標(biāo)標(biāo)簽img相對于document頂部的位置if (offsetTop <= (scrollTop + windowHeight) && offsetTop >= scrollTop) { //在2個(gè)臨界狀態(tài)之間的就為出現(xiàn)在視野中的return true;}return false;}function isLoaded($img) {return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已經(jīng)加載過了}function loadImg($img) {$img.attr('src', $img.attr('data-src')); // 加載就是把自定義屬性中存放的真實(shí)的src地址賦給src屬性} </script></html>

在vue中使用這個(gè)項(xiàng)目插件

目的：

將項(xiàng)目中的圖片先替換成默認(rèn)圖片，等待圖片加載好了，在進(jìn)行替換。

HTML

<div class="news-content">XXXXXXXXXXXXXXX</div>

總結(jié)

以上是生活随笔為你收集整理的jquery实现图片懒加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。