`
Blackbaby
  • 浏览: 184992 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

javascript图片预加载

阅读更多

var imgReady = function (url, callback, error) {
	var width, height, intervalId, check, div,
		img = new Image(),
		body = document.body;

	img.src = url;

	// 从缓存中读取
	if (img.complete) {
		return callback(img.width, img.height);
	};

	// 通过占位提前获取图片头部数据
	if (body) {
		div = document.createElement('div');
		div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
		div.appendChild(img)
		body.appendChild(div);
		width = img.offsetWidth;
		height = img.offsetHeight;

		check = function () {
			if (img.offsetWidth !== width || img.offsetHeight !== height) {
				clearInterval(intervalId);
				callback(img.offsetWidth, img.clientHeight);
				img.onload = null;
				div.innerHTML = '';
				div.parentNode.removeChild(div);
			};
		};

		intervalId = setInterval(check, 150);
	};

	// 加载完毕后方式获取
	img.onload = function () {
		callback(img.width, img.height);
		img.onload = img.onerror = null;
		clearInterval(intervalId);
		body && img.parentNode.removeChild(img);
	};

	// 图片加载错误
	img.onerror = function () {
		error && error();
		clearInterval(intervalId);
		body && img.parentNode.removeChild(img);
	};

};

 

 

 

分享到:
评论

相关推荐

    JavaScript图片预加载代码,显示loading.rar

    JavaScript图片预加载代码,显示loading.rarJavaScript图片预加载代码,显示loading.rarJavaScript图片预加载代码,显示loading.rarJavaScript图片预加载代码,显示loading.rarJavaScript图片预加载代码,显示...

    JavaScript图片预加载代码,显示loading

    JavaScript图片预加载代码,显示loading! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    javascript图片预加载完整实例

    JavaScript图片预加载可以分为不同的方式,其中最常见的是使用JavaScript来创建一个Image对象,并将其src属性设置为要加载的图片地址,这种方式可以异步地下载图片而不会影响页面其他元素的加载。 在上述给出的实例...

    理解Javascript图片预加载

    Javascript图片预加载的实现主要分为几种方法: 方法一:使用CSS和JavaScript实现预加载。此方法通过CSS的background属性将图片设置到屏幕外的背景中,利用浏览器缓存机制,实现图片的预加载。这种方法的优点是简单...

    js图片预加载

    JavaScript图片预加载是一种优化网页性能的技术,特别是在网页中包含大量图片或者有动态加载图片需求时。这种方法通过在用户实际查看图片之前,提前加载图片资源,减少用户等待时间,提升用户体验。这里我们将深入...

    jquery图片预加载

    **jQuery图片预加载技术详解** 在网页开发中,图片预加载是一种优化用户体验的重要技术,尤其在Web和移动端,用户往往期望页面能快速显示并流畅运行。`jQuery`库以其简洁的API和强大的功能,成为实现图片预加载的...

    javascript图片预加载实例分析

    标题“javascript图片预加载实例分析”涉及的知识点涵盖了在JavaScript中实现图片预加载的方法和技巧。图片预加载是一种常见的前端技术,用于提前加载图片资源,以便在需要时可以立即显示,从而提升用户体验。 描述...

    图片预加载特效

    图片预加载就是在用户看到图片前,利用JavaScript或其他技术提前下载图片,使得图片可以快速显示。 预加载主要有以下几种策略: 1. **同步预加载**:使用`<img>`标签的`src`属性预加载图片,这种方式是同步的,会...

    jquery.lazyload图片预加载效果 jquery预加载

    《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...

    图片预加载js

    本文将深入探讨“图片预加载js”这一主题,包括预加载的原理、实现方式以及如何使用JavaScript来优化这个过程。 一、图片预加载的原理 图片预加载是指在用户实际看到图片之前,提前将图片数据加载到浏览器的缓存中...

    学习JavaScript图片预加载模块

    JavaScript图片预加载是一种优化网页加载体验的技术,尤其在图片较多的场景下,通过预先加载图片资源,可以在用户浏览页面时快速展示内容,避免了页面显示空白或者闪烁的情况。本篇文章将深入探讨JavaScript实现图片...

    jquery 预加载图片

    本话题主要围绕"jQuery 预加载图片"这一主题展开,我们将深入探讨jQuery库如何帮助开发者实现图片预加载功能。 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等多个方面的工作...

    图片预加载的js

    基本的JavaScript图片预加载方式是创建一个`<img>`元素,设置其`src`属性为待加载图片的URL,然后将其添加到DOM中。如下所示: ```javascript function preloadImage(url) { var img = new Image(); img.src = ...

    图片预加载效果

    图片预加载技术是一种优化网页性能的方法,主要用于提升用户体验,尤其是对于图像密集型的网站或应用。当用户浏览网页时,预加载技术会提前加载部分或全部未来可能需要的图片资源,这样在用户实际查看这些图片时,...

    JS实现图片预加载

    "JS实现图片预加载" 图片预加载是指在浏览器中预先加载图片,以提高用户体验和减少流量消耗的一种技术。JS 实现图片预加载可以通过使用 Image 对象来实现图片的预下载,并且可以结合容器的宽和高,按照一定的缩放...

    imageReady:javascript图片预加载,检测图片加载完成的组件(图片延迟加载)

    javascript图片预加载,监测图片加载完成,获取图片真实尺寸的组件(图片延迟加载) 如何使用 // 首先在页面中引入imageReady.js /** * @param img string|Image 图片url或者Image对象 * @param onready Function ...

    jQuery实现图片预加载

    **jQuery实现图片预加载** 在Web开发中,用户体验是一个至关重要的因素,而图片加载速度直接影响着用户对网站的第一印象。为了提升用户体验,开发者通常会采用图片预加载技术,确保图片在用户需要时能够快速显示。...

    javascript 也来玩玩图片预加载

    JavaScript图片预加载技术详解 JavaScript图片预加载技术是指在网页加载前预加载图片,以提高用户体验和网站性能。下面是对JavaScript图片预加载技术的详细解释。 图片预加载的重要性 在网页设计中,图片是最基本...

Global site tag (gtag.js) - Google Analytics