jq插件，图片或者视频懒加载

直接上代码（代码复制即可，插件可以自行百度下载或者在我这里下载）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>jq图片视频懒加载</title><meta name="keywords" content="" /><meta name="description" content="" /><meta name="viewport" content="width=device-width" />
</head><body>
<section class="container"><div class="content-wrap"><div id="container"><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood"><br/><img class="lazy img-responsive" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584965560898&di=2745355a556f65761ff857536cb535cc&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F68%2F61%2F300000839764127060614318218_950.jpg" width="765" height="574" alt="BMW M1 Hood"><br/></div></div>
</section><script src="jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript">$(function () {$("img.lazy").lazyload();});
</script>
</body>
</html>

感谢观看，欢迎交流提供更高效代码（视频懒加载是一样的写法，自己思考一下，不明白可以留言，感谢）

jq插件，图片或者视频懒加载相关推荐

JS 实现图片延迟加载（懒加载）
实现原理结构中,我们使用一个盒子包裹着图片(图片不显示的时候,可以先占据着这个位置,并且设置默认背景图或背景颜色) 最开始,img 的 src 设置默认背景图,并把图片真实地址放到自定义属性中(比如 ...
什么是懒加载，如何实现图片或列表懒加载？
文章目录什么是懒加载实现图片懒加载列表懒加载列表滚动加载什么是懒加载只在数据或内容即将进入视口或即将需要的时候才加载. 实现懒加载的好处有: 提高页面加载速度和响应速度.只加载当前用户需要 ...
swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效. ...
前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
微信小程序优化：如何实现图片懒加载？
前言当我们在使用微信小程序浏览图片时,不可避免地会遇到加载缓慢的情况.这不仅会影响用户体验,还会耗费用户的流量.那么,有没有一种方法可以让图片在用户需要时再进行加载,从而提升用户体验和减少流量消耗呢 ...
vue——图片懒加载和禁止图片使用缓存方法
图片预加载: 图片预加载就是在网页全部加载之前提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就 ...
Android插件化开发之动态加载技术简单易懂的介绍方式
转载地方:https://segmentfault.com/a/1190000004062866 基本信息 Author:kaedea GitHub:android-dynamical-loading ...
ajax预加载html seo,前端性能优化 — JS预加载和懒加载
JS预加载需求:有时我们需要实现例如快速快速切换页面.图片之类的功能时,能尽快的加载出我们所需的图片会极大提升用户体验,这时用预加载将图片先缓存到浏览器,用户使用需显示图片时无疑会顺畅很多. 核心: ...
什么是懒加载和预加载？
懒加载: 又叫做延迟加载,通过加载网络资源或符合某些条件时才加载资源.常见的就是图片延迟加载. 懒加载的意义:懒加载的目的主要是作为服务器前端的优化,减少请求数或延迟请求数. 懒加载的实现方式: 1. ...
【vue】预加载、懒加载
项目场景: 提示:记录: 预加载:会在使用之前,提前加载js文件(等其他资源加载完毕,浏览器空闲了,在偷偷加载资源,适用于pc端)兼容性问题严重,caniuse查看是否使用该技术懒加载:当文件需要使 ...

jq插件，图片或者视频懒加载

jq插件，图片或者视频懒加载相关推荐

最新文章

热门文章