jq demo 简单的图片懒加载效果
重点：在元素进入可视区域后，把图片元素的 _src 的值，赋值给 src
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div{ margin-top:300px; width:470px; height:150px; border:1px #000 solid;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
toChange();
function toChange(){
$('img').each(function(i,elem){
if($(elem).offset().top<$(window).height()+$(window).scrollTop()){
$(elem).attr('src',$(elem).attr('_src'));
}
});
}
$(window).scroll(toChange);
});
</script>
</head>
<body>
<div><img _src="img/1.jpg"></div>
<div><img _src="img/2.jpg"></div>
<div><img _src="img/3.jpg"></div>
<div><img _src="img/4.jpg"></div>
<div><img _src="img/5.jpg"></div>
</body>
</html>
jq demo 简单的图片懒加载效果的更多相关文章
- jquery图片懒加载效果
1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...
- 原生 JS 实现最简单的图片懒加载
懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...
- 如何结合插件 vue-lazyload 来简单实现图片懒加载？
插件地址:https://www.npmjs.com/package/vue-lazyload: 一.使用场景: 在项目中有很多条数的信息,且图片很多的时候,不需要一次把整个页面的图片都加载完,而是在 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- vue项目中实现图片懒加载的方法
对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...
- Vue项目中实现图片懒加载
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...
- 使用jQuery实现图片懒加载原理
原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...
- 如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
- lazy图片懒加载使用
看到一个小伙子写的言简意赅很不错,摘录如下: https://www.npmjs.com/package/vue-lazyload 首先我们先在npm上下载vue-lazyload的包 1 npm i ...
随机推荐
- mecacheq的配置
在处理业务逻辑时有可能遇到高并发问题,例如商城秒杀.微博评论等.如果不做任何措施可能在高瞬间造成服务器瘫痪,如何解决这个问题呢?队列是个不错的选择.队列(Queue)又称先进先出(First In F ...
- ASP.NET页面之间传值的方式之Session（个人整理）
Session Session在ASP.NET中,表示客户端(Goggle,Firefox,IE等)与服务器端的会话,用来存储特定会话信息,准确来说,是用来存储特定用户信息.当客户端向服务器发送一个请 ...
- Windbg程序调试系列1-Mex扩展使用总结
最近一直在频繁使用Windbg做线上Dump调试,与微软做Case交流的时候,发现微软CSS团队,用了一个非常效率的Windbg 插件,Mex: 使用介绍: https://blogs.msdn.mi ...
- usdt节点启动慢和队列深度超出了范围问题
usdt节点启动慢和队列深度超出了范围问题 usdt的连接节点报错Work queue depth exceeded(队列深度超出了范围)大概是什么问题?重启了几次节点都不行队列深度超出了范围,估计是 ...
- AI 基础
what AI ? 人工智能(Artificial Intelligence),英文缩写为AI. 人工智能是计算机科学的一个分支,它企图了解智能的实质,并生产出一种新的能以人类智能相似的方式做出反应的 ...
- Why Choose MB SD C5 with Engineer Software
MB SD C5 with engineer software performed good and now is released. Unlike the old clone C5 which us ...
- Netty原理分析
Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用 ...
- python爬虫——论抓包的正确姿势和学好Javascript的重要性（1）
没事想爬下数据,就入了scrapy坑,跟着https://zhuanlan.zhihu.com/data-factory这篇教程走,中间被小数量的网站坑过,不过还是写出了爬虫~~ 切糕王子:毫无防御, ...
- Linux 进程后台运行
Linux 进程后台运行 1.进程在当前终端后台运行.(关闭终端后进程自动退出) sh test.sh & 注:运行进程后跟 “&” 2.进程长期后台运行不受终端关闭影响. nohup ...
- UVA11235 Frequent values
思路 连续的值只会分布在一起成一个块 讨论两边的块,中间就是RMQ了 ST表即可 代码 #include <cstdio> #include <algorithm> #incl ...