预加载css,js,image的代码:
/**
* 预加载img, css, js文件
* preload([
* 'yourpath/x.png',
* 'yourpath/x.js',
* 'yourpath/x.css'
* ]);
*/
function preload(files){
//如果传入的参数files不是数组,返回
if(Object.prototype.toString.call(files) !== "[object Array]"){return;}
var obj = null, ie = '\v'=='v';
for(var i = 0, l = files.length; i < l; i ++){
if (ie) {
new Image().src = files[i];
continue;
}
obj = document.createElement('object');
//如果是IE7/8,也可以通过下面四行触发加载。
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden";
//o.type = "text/plain"; //IE
obj.data = files[i];
obj.width = 0;
obj.height = 0;
document.body.appendChild(obj);
}
}
- new Image().src 之所以不能在Firefox中使用,是因为Firefox会对图片执行单独的缓存。
- 动态插入的 object 标签需要插入到非 head部分,才触发加载。
- IE7/8也可以通过一些代码使用动态object加载文件(代码注释中有提到),但是object通常降低效率。
分享到:
相关推荐
本文将深入探讨“图片预加载js”这一主题,包括预加载的原理、实现方式以及如何使用JavaScript来优化这个过程。 一、图片预加载的原理 图片预加载是指在用户实际看到图片之前,提前将图片数据加载到浏览器的缓存中...
2. **异步预加载**:通过JavaScript创建`Image`对象并设置其`src`属性,这样可以在后台加载图片,不会阻塞页面渲染。例如: ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; ``` 3. **...
`images`文件夹自然存放了需要预加载的图片,而`js`文件夹可能包含了`jQuery`库和上述预加载函数的JavaScript代码。 预加载策略并不止于简单地逐个加载所有图片。对于大图或者数量众多的图片,可以采用分批加载、懒...
预加载CSS或JavaScript文件是网页优化的常见做法之一。它旨在提高页面加载速度和用户体验,确保当用户需要使用到这些文件时,它们已经被加载,从而减少了用户需要等待的时间。在用户浏览网站的同时,通过预加载技术...
本文将深入探讨“js_css_image”压缩包中的相关知识点,重点关注`datatable editor`资源,以及它们如何与CSS和JavaScript结合,提供丰富的用户体验。 首先,`datatable editor`是一种流行的JavaScript库,专门用于...
1. **获取图片列表**:首先,你需要确定需要预加载的图片列表,这可以通过HTML元素、CSS选择器或者动态生成的数组来实现。 2. **创建`<img>`标签**:为每个图片创建`<img>`标签,并设置`src`属性为空或者占位符图片...
jQuery是一款广泛使用的JavaScript库,它提供了丰富的API和插件,使得实现图片预加载变得简单。以下是一个基本的预加载插件的实现步骤: 1. 引入jQuery库:在HTML文件中,你需要首先引入jQuery库,可以通过CDN链接...
例如,除了上述的JavaScript实现方式,还可以使用CSS的`background-image`属性结合JavaScript来实现预加载效果,或者利用HTML5的`<img>`标签的`onload`和`onerror`事件来处理图片加载的事件。 需要注意的是,在实际...
首先,我们需要创建一个JavaScript函数来处理预加载任务。这个函数会遍历图片列表,为每张图片创建一个新的`Image`对象,然后将图片的URL设置为`src`属性。这样,浏览器就会在后台开始下载这些图片,而不会阻塞其他...
传统的预加载方式通常依赖于JavaScript,但今天我们将探讨如何利用纯CSS实现图片预加载,从而摆脱对JavaScript的依赖。 ### 为什么需要图片预加载? 在网页中,当用户滚动页面时,如果图片没有预先加载,可能会...
在这个实例中,我们将探讨如何实现瀑布流效果,并结合图片预加载技术来提升用户体验。 首先,`style.css`文件通常包含了实现瀑布流布局所需的CSS样式。瀑布流布局的关键在于利用CSS的`float`属性或`display: inline...
此外,`js`文件很可能是用于处理预加载逻辑的JavaScript代码。 7. **图片预加载的特点**: - **提高用户体验**:减少了用户等待时间,提高了页面响应速度。 - **节省带宽**:通过合理策略,只加载必要的图片,...
- **图片预加载**:使用JavaScript创建Image对象,提前加载图片资源,避免用户在滚动页面时出现延迟加载的现象。 - **CSS预加载**:通过CSS Sprites技术将多个小图标合并成一张大图,减少HTTP请求次数,提高加载...
另一种JavaScript预加载方法是创建一个新的`Image`对象,并为其`src`属性赋值为要预加载的图片URL。这可以通过循环遍历一个包含多个图片URL的数组来实现。这种方法更加灵活,可以预加载任意数量的图片,而不需要预先...
本文将详细介绍如何使用JavaScript和jQuery来实现这一功能,以及如何检测预加载的完成状态并在此基础上执行其他操作。 ### 1. 图片预加载的重要性 预加载图片可以减少用户等待时间,特别是在处理大量图片或者高...
为了提高页面加载效率和用户浏览的流畅性,我们可以采用图片预加载技术。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,可以帮助我们实现这一目标。本篇文章将深入探讨如何使用jQuery实现图片预加载,...
另一种纯JavaScript预加载的方法是创建`Image`对象并设置其`src`属性。这可以在页面加载前或加载后执行,以确保图片在需要时已经准备好。例如: ```javascript function preload() { for (i = 0; i ; i++) { ...
虽然用于图片预加载的场景比较特殊,但原理上与JavaScript预加载相似。 结合Ajax预加载图片,可以利用XMLHttpRequest对象来请求图片文件,并获取其内容。但这种方法不太常见,因为图片加载对用户是可见的,而Ajax...