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.rarJavaScript图片预加载代码,显示loading.rarJavaScript图片预加载代码,显示loading.rarJavaScript图片预加载代码,显示loading.rarJavaScript图片预加载代码,显示...
JavaScript图片预加载代码,显示loading! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
JavaScript图片预加载可以分为不同的方式,其中最常见的是使用JavaScript来创建一个Image对象,并将其src属性设置为要加载的图片地址,这种方式可以异步地下载图片而不会影响页面其他元素的加载。 在上述给出的实例...
Javascript图片预加载的实现主要分为几种方法: 方法一:使用CSS和JavaScript实现预加载。此方法通过CSS的background属性将图片设置到屏幕外的背景中,利用浏览器缓存机制,实现图片的预加载。这种方法的优点是简单...
JavaScript图片预加载是一种优化网页性能的技术,特别是在网页中包含大量图片或者有动态加载图片需求时。这种方法通过在用户实际查看图片之前,提前加载图片资源,减少用户等待时间,提升用户体验。这里我们将深入...
**jQuery图片预加载技术详解** 在网页开发中,图片预加载是一种优化用户体验的重要技术,尤其在Web和移动端,用户往往期望页面能快速显示并流畅运行。`jQuery`库以其简洁的API和强大的功能,成为实现图片预加载的...
标题“javascript图片预加载实例分析”涉及的知识点涵盖了在JavaScript中实现图片预加载的方法和技巧。图片预加载是一种常见的前端技术,用于提前加载图片资源,以便在需要时可以立即显示,从而提升用户体验。 描述...
图片预加载就是在用户看到图片前,利用JavaScript或其他技术提前下载图片,使得图片可以快速显示。 预加载主要有以下几种策略: 1. **同步预加载**:使用`<img>`标签的`src`属性预加载图片,这种方式是同步的,会...
《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...
本文将深入探讨“图片预加载js”这一主题,包括预加载的原理、实现方式以及如何使用JavaScript来优化这个过程。 一、图片预加载的原理 图片预加载是指在用户实际看到图片之前,提前将图片数据加载到浏览器的缓存中...
JavaScript图片预加载是一种优化网页加载体验的技术,尤其在图片较多的场景下,通过预先加载图片资源,可以在用户浏览页面时快速展示内容,避免了页面显示空白或者闪烁的情况。本篇文章将深入探讨JavaScript实现图片...
本话题主要围绕"jQuery 预加载图片"这一主题展开,我们将深入探讨jQuery库如何帮助开发者实现图片预加载功能。 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等多个方面的工作...
基本的JavaScript图片预加载方式是创建一个`<img>`元素,设置其`src`属性为待加载图片的URL,然后将其添加到DOM中。如下所示: ```javascript function preloadImage(url) { var img = new Image(); img.src = ...
图片预加载技术是一种优化网页性能的方法,主要用于提升用户体验,尤其是对于图像密集型的网站或应用。当用户浏览网页时,预加载技术会提前加载部分或全部未来可能需要的图片资源,这样在用户实际查看这些图片时,...
"JS实现图片预加载" 图片预加载是指在浏览器中预先加载图片,以提高用户体验和减少流量消耗的一种技术。JS 实现图片预加载可以通过使用 Image 对象来实现图片的预下载,并且可以结合容器的宽和高,按照一定的缩放...
javascript图片预加载,监测图片加载完成,获取图片真实尺寸的组件(图片延迟加载) 如何使用 // 首先在页面中引入imageReady.js /** * @param img string|Image 图片url或者Image对象 * @param onready Function ...
**jQuery实现图片预加载** 在Web开发中,用户体验是一个至关重要的因素,而图片加载速度直接影响着用户对网站的第一印象。为了提升用户体验,开发者通常会采用图片预加载技术,确保图片在用户需要时能够快速显示。...
JavaScript图片预加载技术详解 JavaScript图片预加载技术是指在网页加载前预加载图片,以提高用户体验和网站性能。下面是对JavaScript图片预加载技术的详细解释。 图片预加载的重要性 在网页设计中,图片是最基本...