jquery实现图片懒加载
生活随笔
收集整理的這篇文章主要介紹了
jquery实现图片懒加载
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現一個懶加載，效果如上所示
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毫秒內進行scroll的話，都會被clearTimeout掉，setTimeout不會執行。//如果有300毫秒外的操作，會得到一個新的timeID即clock，會執行一次setTimeout,然后保存這次setTimeout的ID，//對于300毫秒內的scroll事件，不會生成新的timeID值，所以會一直被clearTimeout掉，不會執行setTimeout.clearTimeout(clock);}clock = setTimeout(function () {console.log('運行了一次');lazyRender();}, 300)})function lazyRender() {$('.container img').each(function () {if (checkShow($(this)) && !isLoaded($(this))) {loadImg($(this));}})}function checkShow($img) { // 傳入一個img的jq對象var scrollTop = $(window).scrollTop(); //即頁面向上滾動的距離var windowHeight = $(window).height(); // 瀏覽器自身的高度var offsetTop = $img.offset().top; //目標標簽img相對于document頂部的位置if (offsetTop <= (scrollTop + windowHeight) && offsetTop >= scrollTop) { //在2個臨界狀態之間的就為出現在視野中的return true;}return false;}function isLoaded($img) {return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已經加載過了}function loadImg($img) {$img.attr('src', $img.attr('data-src')); // 加載就是把自定義屬性中存放的真實的src地址賦給src屬性} </script></html>在vue中使用這個項目插件
目的：
將項目中的圖片先替換成默認圖片，等待圖片加載好了，在進行替換。
HTML
<div class="news-content">XXXXXXXXXXXXXXX</div>JS
var app = new Vue({el: '#app',data: {clock: ""},mounted: function () {$('.news-content img').each(function () {let self = $(this);$(this).attr('data-src', self.attr('src')).attr('src', 'https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png');})this.lazyLoad();this.scrollLoad();},methods: {scrollLoad() {let self = this;$(window).on('scroll', function () {if (self.clock) {clearTimeout(self.clock);}self.clock = setTimeout(function () {self.lazyRender();}, 300)})},lazyLoad() {let self = this;$('.news-content img').each(function () {if (self.checkShow($(this)) && !self.isLoaded($(this))) {self.loadImg($(this));}})},lazyRender() {let self = this;$('.news-content img').each(function () {if (self.checkShow($(this)) && !self.isLoaded($(this))) {self.loadImg($(this));}})},checkShow($img) { // 傳入一個img的jq對象let scrollTop = $(window).scrollTop(); //即頁面向上滾動的距離let windowHeight = $(window).height(); // 瀏覽器自身的高度let offsetTop = $img.offset().top; //目標標簽img相對于document頂部的位置if (offsetTop <= (scrollTop + windowHeight) && offsetTop >= scrollTop) { //在2個臨界狀態之間的就為出現在視野中的return true;}return false;},isLoaded($img) {return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已經加載過了},loadImg($img) {$img.attr('src', $img.attr('data-src')); // 加載就是把自定義屬性中存放的真實的src地址賦給src屬性}} });總結
以上是生活随笔為你收集整理的jquery实现图片懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 毕业论文格式检查指南与内容要求
- 下一篇： restful API 常用的四种方式