前端技术--懒加载

有利于优化前端页面因瀑布页面图片多而导致的页面加载时间长，加载慢的问题。

原理

  • 设置个data-src(自定义一个属性)来存放真实地址
  • 当滚动页面时，检查所有的img标签，看是否出现在视野中，如果已经出现在了视野中，那继续再进行判断，看其是否已经被加载过了，如果还没有被加载过，那就进行加

这里需要注意两个问题 首先页面一开始不进行滚动 就不会加载任何图片  滚轮开始动的时候就加载会重复  所以会浪费资源  不如等到滚轮停止再加载

代码如下

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片懒加载-简单</title>
<script src="jquery-3.1.1.min.js"></script>
<style>
ul,li{
list-style:none;
}
.container{
width: 600px;
margin: 0 auto;
}
.container li{
float: left;
margin: 10px 10px;
}
.container li img{
width: 240px;
height: 180px;
}
p{
float: left;
}
</style>
</head>
<body>
<ul class="container">
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li>
<li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li>
</ul>

<script>
// 先进行一次检查
lazyRender();
//为了不在滚轮滚动过程中就一直判定，设置个setTimeout,等停止滚动后再去判定是否出现在视野中。
var clock; //这里的clock为timeID，
$(window).on(‘scroll‘,function () {
// lazyRender();
if (clock) { // 如果在300毫秒内进行scroll的话，都会被clearTimeout掉，setTimeout不会执行。
//如果有300毫秒外的操作，会得到一个新的timeID即clock，会执行一次setTimeout,然后保存这次setTimeout的ID，
//对于300毫秒内的scroll事件，不会生成新的timeID值，所以会一直被clearTimeout掉，不会执行setTimeout.
clearTimeout(clock);
}
clock = setTimeout(function () {
lazyRender();
},300)
})

function lazyRender () {
$(‘.container img‘).each(function () {
if (checkShow($(this)) && !isLoaded($(this)) ){
loadImg($(this));
}
})
}
$(window).on(‘scroll‘,function () {//当页面滚动的时候绑定事件
$(‘.container img‘).each(function () {//遍历所有的img标签
if (checkShow($(this)) && !isLoaded($(this)) ){
// 需要写一个checkShow函数来判断当前img是否已经出现在了视野中
//还需要写一个isLoaded函数判断当前img是否已经被加载过了
loadImg($(this));//符合上述条件之后，再写一个加载函数加载当前img
}
})
})
function checkShow($img) { // 传入一个img的jq对象
var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
var windowHeight = $(window).height(); // 浏览器自身的高度
var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置

if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
return true;
}
return false;
}
function isLoaded ($img) {
return $img.attr(‘data-src‘) === $img.attr(‘src‘); //如果data-src和src相等那么就是已经加载过了
}
function loadImg ($img) {
$img.attr(‘src‘,$img.attr(‘data-src‘)); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
}
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/xin521/p/10368497.html

时间： 2024-10-04 01:22:52

前端技术--懒加载的相关文章

网站优化--图片的预加载与懒加载（上）

1.延迟加载即懒加载,主要目的是作为服务器前端的优化,减少请求数或延迟请求数,在一些图片非常多的网站中非常有用,当图片位置进入到可视区的时候才会被加载,这样对于含有很多 图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽 最常用的方式是:监控滚动条的高度,当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载 2.预加载:在查看前面张图片的时候加载后面的图片,在提升用户体验的同时会增加服务器的压力 常用方式:创建image对象,通过src属性加载url资源,当资源加载完成后

前端性能优化技术（一）：图片懒加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyload</title> </head> <body> <div> <a href="#"><img class="lazy" src="imag

【转】前端懒加载以及预加载

懒加载(延迟加载):延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 1.懒加载: 意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 实现方式: 1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟. 2.第二种是条件加载,符合某些条

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

前端优化-图片懒加载

一.什么是懒加载 懒加载技术(简称lazyload)是对网页性能优化的一种方案.lazyload的核心是按需加载,避免网页打开时加载过多资源,让用户等待太久,在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域).这里我们主要是对img标签使用懒加载技术,使用jquery的query.lazyload.js库实现. 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览

抛砖引玉:大型网站性能优化之Javascript异步懒加载技术

懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用到了懒加载技术,比如国内两个大型电商网站的页面都运用到了这项技术: 天猫首页: 京东商品列表页: 最近在学习时,自己写了一个带懒加载功能的电影列表展示页,大家可以先看下页面效果: http://f81236211.w4w7.tumm.top/lazyload/ 然后自己在页面底部写了一个分页功能,页

懒加载——网页图片的加载技术

目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时,均采用一种称为懒加载的方式.具体表现为:当页面被请求时,只加载可视区域的图片,其他部分图片则不加载,只有这些图片出现在可视区域的时候,才会动态进行加载这些图片,从而节约了带宽.提高了初次加载的速度.具体实现方式如下: 首先,在页面准备一个div为div1的div,在这个div中放一个ul,lu中准备一些li,这些li都有一个data-src属性,准备着图片的地址,具体结构如下:     <div id="div1"&

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动

Python网络爬虫之图片懒加载技术、selenium和PhantomJS

一.什么是图片懒加载? - 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- import requests from lxml import etree if __name__ == "__main__": url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html' headers = { 'User-Agen