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 ...
随机推荐
- netty如何实现零拷贝
根据 Wiki 对 Zero-copy 的定义: "Zero-copy" describes computer operations in which the CPU does n ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ftp权限设置大全！！！
1．登录和对匿名用户的设置write_enable=YES //是否对登录用户开启写权限.属全局性设置.默认NOlocal_enable=YES ...
- chrome内核浏览器插件的使用--Tampermonkey（油猴插件）
Tampermonkey(油猴插件),这个插件是一个用于改造你浏览器打开的网站的插件.它可以在你打开的网页中注入任意js脚本,以达到你想要的外加功能.可以说非常不错.很多时候也值得使用. 这是个chr ...
- QQ"坦白说"抓包破解与PacketCapture使用介绍
据腾讯发布内容来看,“坦白说”是刚刚在QQ中上线的新功能,还在测试阶段就已经非常火爆. 但作为一种web端的小游戏,无疑可以使用爬虫的来自我模拟. (话说写完这篇的时候我总感觉自己几年前好像写过这个. ...
- Linux下按扇区读写块设备
本文介绍Linux下按扇区读写块设备(示例TF卡),实际应用是在Android系统上,主要方法如下: 1.找到sdcard的挂载点,在android2.1系统下应该为/dev/block/mmcblk ...
- 剑指offer（47）求1+2+3+...+n
题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题目分析 不能用乘除也就不能用公示了,并且不能 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- UVA11995 I Can Guess the Data Structure!
思路 简单题,用栈,队列,优先队列直接模拟即可 代码 #include <cstdio> #include <algorithm> #include <cstring&g ...
- linux中使用ifconfig命令查看网卡信息时显示为eth1，但是在network-scripts中只有ifcfg-eth0的配置文件，并且里面的NAME="eth0"。
除了题目中的问题,其实在执行命令:service network restart时,会报错: 解决办法: 首先需要修改70-persistent-net.rules文件: vim /etc/udev/ ...