重点：在元素进入可视区域后，把图片元素的 _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. Eclipse Decompiler不生效解决办法

    如下图,解决方案,Preferences->General->Editors->File Associations->*.class->Decompiler->De ...

  2. sublime text 入门

    sublime text3入门教程 2017年07月19日 09:15:51 阅读数:13736 作者:sam976 转载需征得作者本人同意,谢谢. 1.介绍 所谓工欲善其事必先利其器,编码过程合理熟 ...

  3. Java内存模型学习笔记

    Java内存模型(JMM):描述了java程序中各种变量(线程共享变量)的范根规则,以及在JVM中将变量存储到内存和从内存中读取出变量这样的底层细节.共享变量就是指一个线程中的变量在其他线程中也是可见 ...

  4. jQuery安装和语法

    jQuery是一个JavaScript函数库,可实现HTML元素选取及操作.CSS 操作.HTML事件函数.JavaScript特效和动画.HTML DOM遍历和修改.AJAX等功能. 在html中引 ...

  5. 用python画小王八裤（turtle库）

    一,采用Python语言如何画一朵玫瑰花 工具/原料 Python语言包 Win10 一. 准备 1. 打开界面: 打开python 2. 创建文件 二. 编程 1. 编写画图: from turtl ...

  6. MatLab数字图像处理实战（赵小川）-sift原理

  7. GlitchBot

    问题 F: GlitchBot 时间限制: 1 Sec  内存限制: 128 MB 提交: 230  解决: 113 [提交] [状态] [命题人:admin] 题目描述 One of our del ...

  8. [CodeForces 372A] Counting Kangaroos is Fun

    题目链接:http://codeforces.com/problemset/problem/372/A 二分思想 AC代码: #include <cstdio> #include < ...

  9. SAP的软件维护费用，交还是不交？

    SAP的软件维护费用,交还是不交? 首先我们要明确一点,什么是软件维护费用?     软件维护费用是指在企业购买了软件厂商的软件产品之后,软件厂商每年按照一定比例向企业收取一定的技术支持维护费用.收取 ...

  10. 实现Python与STM32通信

    断断续续学了几周Stm32后,突然想实现上位机和下位机的通信,恰好自己学过一点python,便想通过python实现通信. 在网上看见python库pyserial可以实现此功能,便去官网找了一下 , ...