重点：在元素进入可视区域后，把图片元素的 _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 简单的图片懒加载效果的更多相关文章

  1. jquery图片懒加载效果

    1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...

  2. 原生 JS 实现最简单的图片懒加载

    懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...

  3. 如何结合插件 vue-lazyload 来简单实现图片懒加载？

    插件地址:https://www.npmjs.com/package/vue-lazyload: 一.使用场景: 在项目中有很多条数的信息,且图片很多的时候,不需要一次把整个页面的图片都加载完,而是在 ...

  4. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  5. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  6. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  7. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  8. 如何在小程序实现图片lazy-load懒加载效果

    自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...

  9. lazy图片懒加载使用

    看到一个小伙子写的言简意赅很不错,摘录如下: https://www.npmjs.com/package/vue-lazyload 首先我们先在npm上下载vue-lazyload的包 1 npm i ...

随机推荐

  1. beego 初体验 - 基础模块 - config, httplibs, logs

    beego 的基础模块支持了一些web开发常用的功能. 配置,http操作库,日志 配置模块: 这是我的配置文件 如何读取: httplibs:这是一个利用 httplibs 发起 get 请求的示例 ...

  2. 中文WebFont解决方案Font-Spider(字蛛)

    我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...

  3. [ Python ] KMP Algorithms

    def pmt(s): """ :param s: the string to get its partial match table :return: partial ...

  4. uva12545

    #include<iostream> using namespace std; +; char s[maxn],t[maxn]; int main(){ //freopen("1 ...

  5. python报错之OSError

    刚刚练一下xlrd模块的时候,竟然报错了! 百度了一下,才知道,是自己直接复制粘贴导致的:最好直接搜索\u202a才找到解决办法 所以只需从写换个地方复制路径或则重新手动输入一次就解决了 参考链接:h ...

  6. usb鼠标制作调试记录

    2010-07-26 20:07:00 制作调试过程 1,串口通信硬件设计.焊接了串口通信电路实验.由于我的usb转串口线是不能配max232的.而是要配一个反向器.于是自己焊接了74ls00.并且把 ...

  7. C#简单的九九乘法表

    for(int i=1;i<10;i++) { for(int j=1;j<=i;j++) { Console.Write("{0}*{1}={2}",j,i,i*j) ...

  8. laravel 分页使用

    分页 //对数据库结果分页 $users = DB::table('users')->paginate(15); //可以对 Eloquent 模型分页: $allUsers = User::p ...

  9. vector和list

    vector vector与数组类似,拥有一段连续的内存空间,并且起始地址不变.便于随机访问,时间复杂度为O(1),但因为内存空间是连续的,所以在进入插入和删除操作时,会造成内存块的拷贝,时间复杂度为 ...

  10. ant_任务的含义与使用

    任务是一段可执行的代码.任务可以具有多个属性,每个任务都具有共同的结构.任务常见结构由名称,属性等组成. 任务配置结构示例: <task-name attribute1 = "valu ...