重点：在元素进入可视区域后，把图片元素的 _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. 实现Runnable接口创建多线程及其优势

    实现Runnable接口创建多线程: 创建一个Runnable接口的实现类RunnableImpl: 主线程中: 其中,链式编程的Thread类的静态方法currentThread方法点getName ...

  2. flask 使用Flask-Migrate迁移数据库（创建迁移环境、生成迁移脚本、更新数据库）

    使用Flask-Migrate迁移数据库 在开发时,以删除表再重建的方式更新数据库简单直接,但明显的缺陷是会丢掉数据库中的所有数据.在生产环境下,没有人想把数据都删除掉,这时需要使用数据库迁移工具来完 ...

  3. 关于Could not read pom.xml和No plugin found for prefix 'tomcate7' in the current project

    当时出现的错误:  有大神知道我这个错误怎么解决吗[ERROR] No plugin found for prefix 'tomcate7' in the current project and in ...

  4. JS(JavaScript）的初了解4（更新中···）

    1.JS的本质就是处理数据.数据来自于后台的数据库. 所以变量就起到一个临时存储数据的作用. ECMAScript制定了JS的数据类型. 数据类型有哪些? 字符串   String 数字    Num ...

  5. Excel 表格查找重复数据，去重复统计

    找出表格是否有重复数据: =IF(AND(G20=G19,D20=D19),"是","否") 筛选移除[重复的数据]然后开始统计 =SUBTOTAL(9,E2: ...

  6. 微信小程序unionid获取问题

    微信小程序使用login获取unionid时可能获取不到,原因可能是该微信账号没有关注小程序所在公众号等.但在微信小程序中使用微信注册,必须要用unionid注册时,大部分用户就会因此无法注册成功. ...

  7. websocket是如何进行建立连接与通信的?(简单理解)

    握手过程: websocket-client端通过ws协议向websocket-server端发起连接请求前,首先在自己的请求头中添加Sec-Websocket-Key键值对,值为根据自己账号通过一定 ...

  8. 数组中的stdClass Object如何访问

    使用print_r($data)输出结果为 Array ( [0] => stdClass Object ( [color_item_no] => 1 [color_name] => ...

  9. nginx LetsEncrypt

    linux certbot https://certbot.eff.org/ windows letsencrypt-win-simple.V1.9.3(个人认为比新版本好用)https://gith ...

  10. js 数组原型

    Array.isArray( Array.prototype ) // A. true // B. false // C. error // D. other 答案是A. 其实 Array.proto ...