重点：在元素进入可视区域后，把图片元素的 _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. jQuery-form实现文件分步上传

    分步上传:当你需要提交两个及以上的文件,在一个文件成功后再提交另一个文件,并且最后需要提交所有文件的地址组成的数据 HTML: <form id="uploadVideoForm&qu ...

  2. sublime设置tab为四个空格

    在首选项->设置里: 添加: "tab_size": 4, "translate_tabs_to_spaces": true,

  3. py-faster-rcnn

    踩坑: 1. 服务器上训练: sh ./experiments/scripts/faster_rcnn_end2end.sh 会各种报错 有说是因为#!/bin/bash的问题,改过,不行. 改成如下 ...

  4. Linux基础命令---sysctl修改内核参数

    sysctl sysctl指令用来修改正在运行的内核参数,可以修改的参数都保存在/proc/sys/目录中,修改会立即生效.Linux中的sysctl支持需要Procfs.您可以使用sysctl来读取 ...

  5. webpack学习入门

    写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...

  6. Linux+Jenkins环境搭建

    一.安装基础环境 1. yum -y install java-1.8.0-openjdk.x86_64 #安装1.8jdk 2. 查看java 版本 [root@localhost djanggo_ ...

  7. Docker 搭建私有仓库

    Docker 搭建私有仓库 环境: docker 版本 :18.09.1 主机地址:192.168.1.79 1.运行并创建私有仓库 docker run -d \ -v /opt/registry: ...

  8. How use Nmon and "Java Nmon Analyzer" for Monitor Linux Performance

    Nmon is a  resource monitoring tools which can monitor CPU, Memory, Disks, Network and even Filesyst ...

  9. ubuntu 16.04 tip

    参考 1. 安装 python3.6 sudo add-apt-repository ppa:jonathonf/python-3.6  sudo apt-get update sudo apt-ge ...

  10. web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识

    web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...