jquery延迟加载
jquery实现图片延时加载,实现原理:不设置img的src地址,把地址存在img的alt中,当img标签出现在可视区域,alt值传给src。为避免看到替换文本alt,把字体的颜色设置为背景的颜色,如果背景不是单一色就给个相近色吧,我把值存在alt里是想兼容IE等浏览器。
如果各位有更好的办法,欢迎留言!
html代码如下:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> $(document).ready(function(){
var body = $("body");
var offset = null;
var src = null;
//获取当前窗口的可见高度
var windowHeigth = $(window).height();
//获取当前窗口的可见宽度
var windowWidth = $(window).width();
body.find("img").each(function(){
//获取图片的src属性
src = $(this).attr("alt");
//获取图片的绝对位置
offset = $(this).offset();
if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
//先隐藏 再淡入
$(this).css("display","none");
$(this).attr("src",src).removeAttr("alt").fadeIn("slow");
}
}); }); $(window).on("scroll",function(){
var body = $("body");
var offset = null;
var src = null;
//获取当前窗口的可见高度
var windowHeigth = $(window).height();
//获取当前窗口的可见宽度
var windowWidth = $(window).width();
body.find("img").each(function(){
//获取图片的src2属性
src = $(this).attr("alt");
if(src){
//获取图片的绝对位置
offset = $(this).offset();
if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
//先隐藏 再淡入
$(this).css("display","none");
$(this).attr("src",src).removeAttr("alt").fadeIn("slow");
}
}
}); }); </script> <style>
#test{width:180px;float:left;}
#test img{width:180px;margin-top:20px;height:100px;float:left;color:#FFF;}
.a{width:2000px;height:200px;float:left;}
</style> </head>
<body>
<div id="test">
<img alt="http://img0.bdstatic.com/img/image/shouye/mxly-9537473768.jpg"/>
<div class="a"></div>
<img alt="http://img0.bdstatic.com/img/image/shouye/mcpwb-9530134528.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/shouyegx2b.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/gxxhbjdl-10011146040.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/qcqctj-9902962988.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/qcbaoma3.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/sjjdsj-4855163457.jpg"/>
<img alt="http://imgstatic.baidu.com/img/image/f9dcd100baa1cd114a9ecc2ebb12c8fcc3ce2d97.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/jjcy-9567536987.jpg"/>
<div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div>
<img alt="http://img0.bdstatic.com/img/image/shouye/jjct-10067496396.jpg"/>
<img alt="http://img1.bdstatic.com/img/image/364d6ca7bcb0a46f21f6421031ef4246b600c33ae62.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
<div class="a"></div> <div class="a"></div> <div class="a"></div>
<img alt="http://img.baidu.com/img/image/fjbz.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/> <img alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
<img alt="http://img.baidu.com/img/image/fjbz.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
<div class="a"></div> <div class="a"></div> <div class="a"></div>
<img alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/> </div> </body>
<html>
jquery延迟加载的更多相关文章
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery延迟加载插件(Lazy Load)详解
最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...
- jquery延迟加载(懒加载)插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 提取数据库字段里面的值,并改变+图片懒加载,jquery延迟加载
要求:手机端打开某个页面的详细信息,因为网速或者别的原因,响应太慢,因为图片大的原因,希望先进来,图片在网页运行的情况再慢慢加载(jquer延迟加载) http://www.w3cways.com/1 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
- jquery 延迟加载代码
<!--引入以下两个js文件--> <script type="text/javascript" src="./js/jquery.min.js&quo ...
- 使用jQuery延迟加载js文件
//异步加载js文件并调用函数 function delayCall(calledFunction, funcParams, jsUrl) { if (eval('typeof '+calledFun ...
- Lazy Load Plugin for jQuery延迟加载测试成功
一直需要的功能,网页图片太多时对于降低网络流量超有用. 最新的V1.9.3版本其实已不用修改就可以起作用了. 不用网上说的要自己修改代码.
- Jquery 延迟加载框架
http://www.appelsiini.net/projects/lazyload
随机推荐
- 寝室远程连接室友mysql数据库
注意,本方法是适用于同一局域网下的远程连接 注意,本方法是适用于同一局域网下的远程连接 注意,本方法是适用于同一局域网下的远程连接 首先需要修改mysql数据库的相关配置,将user表中的host改为 ...
- String判断为空的方式
今天遇到的笔试题: //这样的判空方式是否正确 if(!str.equals("")&&str!=null) 之前我一直都是这么写的,哪知道有什么问题呀,然后面试官 ...
- [PHP] Workerman中的注册树模式
注册树模式是把对象挂到一个类的属性数组里,下次直接在这个数组里面取,保持全局唯一,一般在项目入口初始化的时候有用到.在workerman中一开始的就是个注册树模式的运用,下面是对他的模拟 <?p ...
- A:mysql数据库章节导航
mysql数据库章节导航 mysql5.7的安装(yum和二进制安装) 数据库的基本操作 索引 权限管理 日志管理 逻辑备份mysqldump 物理备份:xtrabackup 主从复制-传统方式 主从 ...
- 使用opencv和numpy实现矩阵相乘和按元素相乘 matrix multiplication vs element-wise multiplication
本文首发于个人博客https://kezunlin.me/post/1e37a6/,欢迎阅读最新内容! opencv and numpy matrix multiplication vs elemen ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- SpringCloud微服务(06):Config组件,实现配置统一管理
本文源码:GitHub·点这里 || GitEE·点这里 一.Config简介 在微服务系统中,服务较多,相同的配置:如数据库信息.缓存.参数等,会出现在不同的服务上,如果一个配置发生变化,需要修改很 ...
- Web前端基础(15):jQuery基础(二)
1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素. 1.1 基本选择器 例子如下: <!DOCTYPE html> ...
- 使用PrintWriter完成写操作 ,实现简易记事本工具
package seday07; import java.io.BufferedWriter;import java.io.FileOutputStream;import java.io.IOExce ...
- git命令教程
git教程笔记 Git是什么? Git是一个分布式版本控制系统 版本控制方式 集中式版本控制:从版本库中先取得最新的版本,改完之后再上传到版本库中,需要联网 分布式版本控制:每个合作者电脑上都有一个版 ...