html5 游戏图片预加载,前端实现图片(img)预加载
.box{width: 1000px;height: 7000px;position: relative;}
.igm1,.igm2,.igm3{width: 1000px;height: 1000px;margin-bottom: 500px;}
$("img").lazyload({
effect :"fadeIn",
threshold :200
});
新建jquery.lazyload.js文件 导入下面代码即可,当然你也可以去百度上搜
(function($, window, document, undefined) {
var $window = $(window);
$.fn.lazyload = function(options) {
var elements = this;
var $container;
var settings = {
threshold : 0,
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : false,
appear : null,
load : null,
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
};
function update() {
var counter = 0;
elements.each(function() {
var $this = $(this);
if (settings.skip_invisible && !$this.is(":visible")) {
return;
}
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} else {
if (++counter > settings.failure_limit) {
return false;
}
}
});
}
if(options) {
if (undefined !== options.failurelimit) {
options.failure_limit = options.failurelimit;
delete options.failurelimit;
}
if (undefined !== options.effectspeed) {
options.effect_speed = options.effectspeed;
delete options.effectspeed;
}
$.extend(settings, options);
}
$container = (settings.container === undefined ||
settings.container === window) ? $window : $(settings.container);
if (0 === settings.event.indexOf("scroll")) {
$container.on(settings.event, function() {
return update();
});
}
this.each(function() {
var self = this;
var $self = $(self);
self.loaded = false;
if ($self.attr("src") === undefined || $self.attr("src") === false) {
if ($self.is("img")) {
$self.attr("src", settings.placeholder);
}
}
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("")
.one("load", function() {
var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed);
self.loaded = true;
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));
}
});
if (0 !== settings.event.indexOf("scroll")) {
$self.on(settings.event, function() {
if (!self.loaded) {
$self.trigger("appear");
}
});
}
});
$window.on("resize", function() {
update();
});
if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
$window.on("pageshow", function(event) {
if (event.originalEvent && event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
}
$(document).ready(function() {
update();
});
return this;
};
$.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
$.inviewport = function(element, settings) {
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};
$.extend($.expr[":"], {
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});
})(jQuery, window, document);
html5 游戏图片预加载,前端实现图片(img)预加载相关推荐
- vue项目,把图片文件流转为base64格式以图片形式展示在前端
问题描述 前台需要展示图片,期望后台直接返回图片地址,但是后台给的是的文件流而不是一个图片地址,需要把文件流转为base64的格式展示出来. 请求后台接口时,返回图片内容如下: 上图不是base64格 ...
- 前端VUE图片预加载
前景:先来说一下图片预加载跟图片懒加载有什么区别: 1.图片懒加载:相对于项目中的图片因为网络原因加载太慢,那么用户第一眼看到呢可能就是页面图片空白然后图片从上到下慢慢悠悠的加载出来,这个时候自定义化 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- 前端页面图片加载优化
前端页面图片加载优化 问题:前端页面如果图片资源过多或者过大就会导致用户加载图片时间过长,导致用户体验下降 我总结的优化思路与方法有以下几种 一.将图标换成icon字体管理 如果项目存在大量的图表用的 ...
- ajax预加载html seo,前端性能优化 — JS预加载和懒加载
JS预加载 需求:有时我们需要实现例如快速快速切换页面.图片之类的功能时,能尽快的加载出我们所需的图片会极大提升用户体验,这时用预加载将图片先缓存到浏览器,用户使用需显示图片时无疑会顺畅很多. 核心: ...
- 小程序预览加载不出图片
小程序预览加载不出图片 比如在开发者工具做了一个swiper轮播图 <view> <swiper indicator-dots="true" indicator- ...
- 【前端】图片懒加载的原理和三种实现方式
一. 图片懒加载的目的 大型网站如常用的淘宝,京东等页面,需要展示大量的商品图片信息,如果打开网页时让所有图片一次性加载完成,需要处理很多次网络请求,等待加载时间比较长,用户体验感很差. 有一种常用的 ...
- https访问http加载不出图片_前端解决第三方图片防盗链的办法
作者:biaochenxuying 转发链接:https://github.com/biaochenxuying/blog/issues/31 问题 笔者网站的图片都是上传到第三方网站上的,比如 简书 ...
- 前端复习--图片加载
1 https://segmentfault.com/a/1190000002433791 即时加载是最常见的加载方式了,我们一般都是通过给img标签指定具体的src值,那么等页面渲染的时候,遇到该标 ...
最新文章
- 16年前卖猪肉的北大高材生如今怎么样了?
- (转)OpenCV版本的摄像机标定
- Linux下截屏方法!
- linux (centos)下安装 mongodb v3.2 笔记(启动的时候可以指定配置文件)
- 模拟电路--可编程数字稳压电源的设计
- 【Ajax技术】解决XHR与中文乱码问题
- 将hls生成的IP添加到vivado2018
- mysql+last_query_cost_辛星简译MySQL中的last_query_cost
- Java之ApiPost工具
- freeimage 安装错误
- 筛选中很容易粘贴到被隐藏部分_excel数据复制到筛选表格被隐藏了-为什么数据粘贴至筛选后EXCEL 表格显示不完全?...
- 自制光猫超级密码解密工具
- 在美国租房子需要考虑什么问题?
- 有哪些计算机法人快捷键,tras企业版操作说明.doc-广东省国家税务局.doc
- 计算机窗口的基本组成部分组成部分,windows7窗口的主要组成部分有哪些
- java severlet 获取当前路径_Java 获取当前路径的方法总结
- 体验华为操作系统 openEuler 20.03 LTS linux
- 低功耗蓝牙芯片基础知识
- windows oracle 19.3.0.0 ORA-27300: operation:bind failed with status:10055 Doc ID 2700423.1
- JVM之垃圾回收-相关名词解释
热门文章
- json boolean android,如何解析Android中的JSON?
- [k8s] 第一章 十分钟带你理解Kubernetes核心概念
- mysql 索引巧用,SQL语句写得忒野了
- Random:产生随机数的类
- python实现文件搜索_python实现搜索指定目录下文件及文件内搜索指定关键词的方法...
- linux 下mysql的管理,Linux下 MySQL安装和基本管理
- 华云数字实名认证图片_华云数据与安宁完成产品兼容互认证 携手推出安宁安全邮件系统联合解决方案...
- 允许其它网段访问centos服务器_访问控制列表-ACL
- mq系列传感器的程序_深圳现代通信系列实训系统
- java中位与运算符_Java中位运算符和的区别