wordpress记录:jquery.lazyload实现图片延迟加载(图片随滚动条渐显)

wordpress博客图片随滚动条渐显的效果,华丽又节省资源,这是jquery实现图片延迟加载,下面就来介绍一下:
特效优点:
加速wordpress站点的页面载入速度;
不唐突的图片渐显方式;
代码精简,便于操作维护,JS代码仅仅 1.6KB  先决条件是:你的站加载了 jquery.js
如:<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
效果预览:http://wentong.org/167/
原理:
华丽又加速,因为它能判断访客是不是在查看当前图片,若则加载预留的填充图片 grey.gif ,等到访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才会加载,同时是支持外部链接的图片。
也就是说,如果访客瞬间打开你的页面,然后瞬间关闭,处于页脚的图片是不被加载的,何乐而不为呢?
不用担心对访客的友好程度,这个效果会在图片即将被浏览到的时候就开始加载图片。
实现方法
下载 jquery.lazyload.js http://kankan.at/lazyload(右键另存为)
下载 预填充图片 grey.gif http://kankan.at/greygif(右键另存为)
将上面js文件,放到wordpress的当前主题的js文件夹,或者你直接在外站调用;将gif图片放到当前主题的images文件夹下,或者外部调用。
在当前主题的 header.php 中</head>之前添加下面 JS调用代码:

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.lazyload.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(
function($){
$(“img”).lazyload({
placeholder : “<?php bloginfo(‘stylesheet_directory’); ?>/images/grey.gif”,
effect      : “fadeIn”
});
});
</script>

说明:

$(“img”)部分可以限定对页面中的哪些img生效,比如修改成 $(“.content img”)

.content 表示只对<div ></div>部分img有效

<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.lazyload.js

<?php bloginfo(‘stylesheet_directory’); ?>/images/grey.gif

以上两个地址均可以根据实际情况修改。

人吐槽 人点赞

猜你喜欢

  • 共享,创业者,程序,睡眠,酒店,拼房小程序来了?
  • 川普签署让非法移民儿童与父母团聚的5条政令(图)
  • 李彦宏开发者大会吐槽贾跃亭:我们吹的牛实现了(图)
  • 全国通用的“微信身份证”:最全的申请攻略 (组图)
  • 地图小程序刷爆朋友圈 制作者或将被起诉(组图)
  • 再见,港澳通行证!以后凭手机可以自由通关(组图)
  • 规模达万亿美元 川普能带美国打赢贸易战吗?(组图)
  • shell 中 exit0 exit1 的区别
  • Linux系统的优势
  • 在Ubuntu上搭建kindle gtk开发环境
  • rls与rlsd
  • 阿里云ECS的CPU100%排查
  • DNS解析
  • 【学习&理解】对fork系统调用的理解
  • BIOS简单讲解
  • linux下的静态库与动态库
  • 操作系统简介
  • 硬盘的核心知识30-35
  • linux下的静态库与动态库详解
  • 第一次作业:基于Linux-0.12的进程分析
  • 一个简单的Linux启动jar包的shell脚本
  • linux系统开机流程详解
  • Linux常用命令拾遗
  • Linux(二十一)Shell编程
  • linux下启动程序和终止程序shell脚本
  • 《深入理解计算机系统》阅读笔记--计算机系统漫游
  • Linux C编程——execve总结
  • Linux C编程——execve总结
  • linux下实现Samba的方法
  • linux内核空间和用户空间的是怎样区别的,如何交互,如何从用户空间进入内核空间
  • 【Linux学习】Linux进程的概念
  • 01_LINUX_基本命令
  • Linux 局域网路由新手指南:第 1 部分
  • 【ARM-Linux开发】linux下代码调试
  • Linux -进程笔记
  • Linux no package 错误
  • Linux下SUID的学习
  • Linux系统下安装 JDK1.8.0_171 最新版本
  • linux下python程序内切换到某目录下执行某程
  • Linux Bash Shell入门教程
  • 【Linux】shell调用Java程序main方法通过crontab定时执行
  • 思维导图:linux程序环境和预处理大概步骤及基本的操作指令
  • Linux学习-标准I/O
  • DelphiXE10.2.3 for Linux开发(三) ——Linux下获取自身运行程序的绝对路径
  • 解决LINUX系统sudo下PYTHONPATH或PATH配置失效的问题
  • 嵌入式Linux学习之概念
  • Linux学习-管道
  • Linux 查看服务状态(服务与进程)
  • Linux中断的实现(一)
  • Linux进程地址空间 && 进程内存布局[转]
  • Centos 7 验证Kickstart文件是否完整方法
  • 腾讯云服务器实现Java客户端远程调用Linux服务器深度模型(Python)(上)
  • 【Linux学习】Linux进程的地址空间
  • Linux网络基础
  • Linux 后台运行程序的命令
  • ARM之嵌入式Linux基本应用程序编写实验
  • Linux日志简介
  • Linux命令之ps:查看进程状态
  • Linux进程管理——转
  • Linux学习-显示文件内容
  • 嵌入式Linux系统移植
  • 老男孩Linux高端运维课程-linux系统定时任务crond入门讲解
  • 清除linux下的cache内存
  • linux下目录扫描程序
  • Linux GCC常用命令
  • 关于Linux的core dump
  • Linux系统如何简单操作进行挖矿?
  • linux 中ll 或 ls -l 数据 解析
  • linux指令积累之(一)
  • (Linux)kill命令详解
  • Linux C多线程编程-线程互斥
  • Unix/Linux 目录结构的来历
  • Linux中的常用内存问题检测工具
  • linux下使用汇编语言编写hello world!程序
  • linux命令格式,获取帮助及其目录结构简要理解
  • linux shell程序
  • [Linux下的QT]介绍使用qmake编译QT程序
  • 01 shell编程规范与变量
  • linux上面是否有安装redis,redis启动
  • Linux系统下fork函数的实验
  • linux C使用strerror来追查错误信息
  • Linux 文件夹的功能与分类
  • Linux基础命令(01)
  • Linux Epoll介绍和程序实例
  • Linux下的重要目录/proc, /sys, /SElinux, /bin, /usr/lib, /usr/local, /var, /tmp
  • linux 串口测试程序
  • MY-EC20 Linux-3.14.52 测试手册
  • imx53qsb linux-2.6.35.3 gstreamer 播放ts流媒体问题解决方法
  • linux内存管理机制
  • Spring boot linux 部署脚本
  • linux进程
  • 如何让Linux服务器后台运行程序
  • linux c 之静态库编写
  • linux coredump 调试
  • Linux更改python版本号
  • Linux就业技术指导(七):游戏类运维重点流程解析
  • Linux系统下redis的安装以及安装过程中遇到的问题的解决方案并附测试程序
  • linux单用户多项目分别使用不同jdk版本(tomcat版)
  • linux系统的目录结构
  • Linux系统下redis的安装以及安装过程中遇到的问题的解决方案并附测试程序
  • Linux下j-link调试程序
  • Linux下GCC编译C语言
  • Linux基础目录结构及作用
  • Linux 前后台进程切换
  • Linux 下常用的bash脚本
  • golang使用linux共享内存及信号实现崩溃重启
  • linux学习 -005 [C/C++基础知识] main函数的参数argc和argv
  • Linux基本指令(问答)
  • linux网络编程(5)基于TCP的客户端程序
  • 基于LNMP环境的ssh2扩展
  • Linux中进程与线程的区别、线程的创建、等待与退出
  • Linux学习笔记(二):Linux是什么
  • 转: Linux:32/64位程序(应用程序、共享库、内核模块)
  • linux可执行文件set-user-id位
  • Linux信号机制-signal
  • Linux SIGINT捕获
  • Linux SIGQUIT 捕获
  • Linux SIGTERM 捕获
  • 基础篇 | 18 Linux下Makefile编译文件制作
  • Linux常见目录的作用
  • 查找资料, 了解以下Linux下的重要目录/proc, /sys, /SElinux, /bin, /usr/lib, /usr/local, /var, /tmp
  • Linux 下编译并运行C语言程序
  • linux下的shell运算(加、减、乘、除
  • Linux的浙江闪讯无线拨号
  • 小想法——Linux脚本while循环实现一个什么都没有的命令行程序
  • linux 下生成core
  • Linux应用、数据库、服务器、中间件等服务启动命令
  • linux 系统优势
  • 《深入理解计算机系统》阅读笔记--程序的机器级表示(上)
  • MariaDB/MySQL中的变量
  • python调用linux命令的方法
  • Centos/Linux 下升级GCC G++
  • 应用 Valgrind 发现 Linux 程序的内存问题
  • Linux路径问题
  • Linux下的常用的打包和解压缩命令
  • linux设置定时执行任务
  • Linux 软件安装到哪里合适,目录详解
  • linux core dump 文件 gdb分析
  • MariaDB/MySQL中的变量
  • 流程控制语句(MySQL/MariaDB )
  • linux中core dump开启使用教程【转】
  • Linux下使用g++编译C++
  • 编程代写:代写单片机 X86-64 程序作业、代写留学生linux os作业
  • (转)linux c 获取系统时间
  • putty xming 访问linux上的jvisualvm程序
  • navicat for mysql安装与破解
  • Linux 下如何产生core文件(core dump设置)
  • linux 静态库和动态库应用简介
  • Windows 和 Linux系统查看进程号
  • Windows系统中完全卸载MySQL数据库,实现重装
  • Linux编译内核与添加系统调用
  • LINUX下使用GDB调试
  • MySQL案例03:Cause: java.sql.SQLException: Could not retrieve transaction read-only status from server
  • navicate 12 连接 mysql8.0 使用日志
  • Linux中crontab无法执行java程序的问题
  • Linux学习之二-Linux系统的目录结构
  • linux 系统调用分析
  • 自学Linux Shell12.5-while、until命令
  • linux 下解决umount 时出现的 "Device is busy"问题
  • 在windows下使用Putty+Xming远程Linux下图形界面程序
  • Linux学习(四)之常用命令总结
  • Linux信号signal用法详解及注意事项
  • Linux进程间通信之System V 消息队列
  • Linux启动项目
  • Linux Mint 安装Hadoop环境排坑
  • Linux-设备-磁盘
  • linux下core文件调试方法
  • 嵌入式 Linux下的动态库原理和使用
  • CentOS笔记:Linux终端Terminal常用快捷键
  • linux下C++编程环境搭建
  • MySQL使用limit的通用分页存储过程
  • Linux系统中的Swap分区详解【转】
  • Linux中的进程讲解
  • 多线程编程以及socket编程_Linux程序设计4chapter15
  • 多线程编程以及socket编程_Linux程序设计4chapter15
  • mysql中insert into select from的使用
  • Linux中的线程
  • [内核源码]Linux 发送报文过程简析及网络杂谈
  • linux strace 使用
  • Linux在后台执行命令或脚本
  • 嵌入式Linux环境下MiniGUI的研究与移植
  • linux调试工具glibc的演示分析-core dump double free【转】
  • Linux jar包 后台运行
  • linux rpm程序包管理器
  • Linux库文件使用说明
  • linux下PHP使用ZipArchive压缩zip文件出现乱码问题
  • [乐意黎]linux的nohup命令的用法
  • linux目录细读
  • 在linux上编译C
  • linux进程内存布局
  • linux 部署脚本
  • 数据库操作对比:Sql Server与MYSQL相比有哪些建站优势?
  • MySQL基础学习(三)---用JAVA程序操作MYSQL数据库
  • 关于java 链接mysql的案例
  • 每天一练:JavaScript 编程题&MySQL 编程题&Java 编程题25
  • mysql开发 -- 触发器
  • 程序猿数据库学习指南
  • 使用 JDBC 连接MySQL
  • 关于MySQL瓶颈分析与性能优化的一些思考
  • MySQL卸载步骤
  • MySQL&Hive
  • No module named MYSQLdb
  • MySQL 修改主键
  • Spring Boot入门(2)使用MySQL数据库
  • 安装Dapper支持MySQL的MySql.Data.dll类库【Asp.Net项目】
  • mysql安装图解
  • apache+php+mysql开发环境搭建
  • 微信小程序调用api接口
  • 关于PHP7
  • 回话处理程序(17)
  • 小程序从后台输出的代码为HTML实体字符如何解决?
  • PHP消息队列实现及应用
  • nginx与php大数据操作
  • 微信小程序支付 后端PHP
  • 小程序与php 实现微信支付
  • hp的几种运行模式CLI、CGI、FastCGI、mod_php
  • phpstorm+Xdebug断点调试PHP
  • php小程序微信支付代码以及目录结构
  • ThinkPHP生成小程序二维码
  • php 异常处理函数 register_shutdown_function
  • 什么是PHP
  • 小说网站建设,小说网站制作,小说网站源码,小说网站定制开发
  • php学习笔记:获取小程序二维码
  • PHP带参数传值调用python脚本
  • php判断浏览器内核是小程序或微信
  • PHP面向对象
  • 微信小程序获取微信绑定的手机号ThinkPhp3.2代码实例
  • 多线程编程 - PHP 实现
  • 微信小程序request请求后台接口php的介绍
  • 微信小程序获取微信绑定的手机号ThinkPhp3.2代码实例
  • 卢松松博客为什么选择PHP系统而不是asp搭配msql数据库[图]
  • PHP 文件锁
  • nginx部署
  • Nginx模块开发指南:使用C++11和Boost程序库
  • 知乎:tomcat 与 nginx,apache的区别是什么?
  • web服务器&应用服务器(Apache、Tomcat、nginx)
  • WordPress新手上路
  • 博客更新服务
  • 撰写日志
  • 程序有瘾:少读程序多读文字
  • 微软不兼容谷歌:OfficeLive Workspace对谷歌浏览器说NO
  • WordPress 3.5 来了!升级还是不升级?
  • iOS (iPad) 平台mkv播放最好、ipad pro播放器支持AC3和MKV
  • 黑莓8520:immmooo微笑世博免费精品主题及二维码在线生成网站
  • 黑莓8520:Rogers5.0.0.900感觉良好上传网盘备份下载
  • 黑莓8220:Rogers4.6.0.293网盘下载[最稳定新系统]
  • BlackBerry Desktop Manager 桌面管理器更新至 6.1.0.35
  • 介绍国产优秀php/mysql微博程序 搭建自己的微博
  • 发布自动批量获取微软Skydrive网络硬盘真实外链地址程序[图文教程]
  • 免备案:CloudFlare 架站者必备免费CDN、DNS 托管服务设定教学,网站载入加速、节省流量防止恶意攻击
  • 用yourls短网址程序(附安装教程)优外部网址链接
  • 更新服务:XML-RPC Ping API整理
  • GAE上传文件图文教程[备份]
  • 站外调用WordPress博客数据库显示WP最新文章
  • 黑莓刷机:新手必看刷机图文教程[二][备份手机资料]
  • 黑莓刷机:新手必看刷机图文教程[三][wipe&#038;Vendor&#038;Loader]
  • 黑莓8520想刷机求解:如何备份中文快捷方式?
  • 黑莓8520:实用快捷键和瘦身删除自带铃声图片
  • 8520刷机:Rogers最新系统5.0.0.900东亚版使用感受
  • jQuery:JavaScript动态改变图片尺寸适应版面
  • jQuery插件:jwTabs(自动切换Tab效果)
  • 给wordpress主题:实现AJAX提交评论功能
  • 小内存大瘦身:黑莓8220 ROM可删除模块及删除发放
  • 当前加载google ajax库的jquery流行版本是1.4.2
  • 黑莓工程模式锁定基站,体验稳定快速网络[转帖]
  • 短网址程序yourls更新至1.5版
  • wordpress数据库调用
  • Google App Engine的app.yaml详细说明
  • WordPress The Loop主循环的运用
  • 固件升级教程:斯贝s-md06 平板电脑固件(最新系统)升级教程(附下载)
  • [iphone新手入门]iphone 4省电参数设置(iphone省电教程)
  • [iphone新手入门]iPhone 4相关知识和技巧分享(iPhone 4最全面教程)
  • 黑莓blackberry能装多大容量的 MicroSD TF 存储卡吗?
  • U盘版Ubuntu:TaijiUbuntu(太极乌邦图)
  • wordpress兼容百度BAE的修改方法
  • 如何使用Minify减少js和css调用时http请求数
  • 干掉多语言包给wordpress加加速
  • wordpress开启独立Cookie-free域名与最后加载google和百度广告代码
  • jQuery实现广告聚焦框效果
  • 搜索标题和内容相关提高wordpress搜索的准确性
  • wordpress文章内容批量转换data-original真正支持jQuery Lazyload
  • WordPress 获取文章中第一个链接
  • TinyPNG WordPress 图片压缩插件,上传后自动最佳化(Compress JPEG &#038; PNG images)
  • 帝国CMS调用指定某一条信息的内容
  • 安全删除 /usr/local/mysql/var/ 几十G mysql-bin.0000*日志文件
  • Centos Linux 命令du -h &#8211;max-depth=统计文件夹占用空间大小
  • 最新版本WordPress禁止自动保存和修订版本方法disable_autosave
  • WordPress留言评论用户划分等级代码 显示博主管理员、友情链接认证
  • putty SS登录ubuntu 终端里出现了“确定”回车无反应不知如何点击
  • 制作U盘Ubuntu启动安装盘从U盘安装Ubuntu系统
  • 在 Windows 工作站上安装 VMware Player
  • 图文教程:怎样建一个wordpress网站
  • HTML 标签可以插入哪些标签?
  • 2018年最受欢迎的9款WordPress插件
  • 提高WordPress网站可访问性的13种有效方法
  • WordPress网站接入微信小程序之前的准备工作
  • 帝国cms自定义函数分页内容页分页美化假分页防采集
  • 帝国CMS(不分版本)实现百度主动推送功能代码与详尽操作教程
  • 帝国CMS后台“批量替换信息内容”功能[图文教程]
  • WordPress评论提交速度缓慢的原因及解决办法
  • 噢,没有这个文件。请重新检查文件名,然后再试。谢谢。
  • ACF to REST AP api插件
  • WordPress谷歌AMP插件 robots 设置、加速移动页面、自动推送代码
  • nginx 自动识别手机端和pc端 访问不同的根目录 lnmp
  • WordPress转换为帝国CMS完整图文教程[技术记录](图文)
  • 发表评论

    用户名: 密码:
    验证码: 匿名发表

    你可以使用这些语言

    查看评论:wordpress记录:jquery.lazyload实现图片延迟加载(图片随滚动条渐显)