`
hong.ri
  • 浏览: 8437 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Javacript 预加载js, image, css

js 
阅读更多

预加载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

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

    图片预加载特效

    2. **异步预加载**:通过JavaScript创建`Image`对象并设置其`src`属性,这样可以在后台加载图片,不会阻塞页面渲染。例如: ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; ``` 3. **...

    jquery图片预加载

    `images`文件夹自然存放了需要预加载的图片,而`js`文件夹可能包含了`jQuery`库和上述预加载函数的JavaScript代码。 预加载策略并不止于简单地逐个加载所有图片。对于大图或者数量众多的图片,可以采用分批加载、懒...

    预加载css或javascript的js代码

    预加载CSS或JavaScript文件是网页优化的常见做法之一。它旨在提高页面加载速度和用户体验,确保当用户需要使用到这些文件时,它们已经被加载,从而减少了用户需要等待的时间。在用户浏览网站的同时,通过预加载技术...

    js_css_image

    本文将深入探讨“js_css_image”压缩包中的相关知识点,重点关注`datatable editor`资源,以及它们如何与CSS和JavaScript结合,提供丰富的用户体验。 首先,`datatable editor`是一种流行的JavaScript库,专门用于...

    jQuery实现图片预加载

    1. **获取图片列表**:首先,你需要确定需要预加载的图片列表,这可以通过HTML元素、CSS选择器或者动态生成的数组来实现。 2. **创建`&lt;img&gt;`标签**:为每个图片创建`&lt;img&gt;`标签,并设置`src`属性为空或者占位符图片...

    图片预加载

    jQuery是一款广泛使用的JavaScript库,它提供了丰富的API和插件,使得实现图片预加载变得简单。以下是一个基本的预加载插件的实现步骤: 1. 引入jQuery库:在HTML文件中,你需要首先引入jQuery库,可以通过CDN链接...

    javascript图片预加载完整实例

    例如,除了上述的JavaScript实现方式,还可以使用CSS的`background-image`属性结合JavaScript来实现预加载效果,或者利用HTML5的`&lt;img&gt;`标签的`onload`和`onerror`事件来处理图片加载的事件。 需要注意的是,在实际...

    图片预加载loading

    首先,我们需要创建一个JavaScript函数来处理预加载任务。这个函数会遍历图片列表,为每张图片创建一个新的`Image`对象,然后将图片的URL设置为`src`属性。这样,浏览器就会在后台开始下载这些图片,而不会阻塞其他...

    纯CSS图片预加载实例 摆脱Javascript预载的束缚

    传统的预加载方式通常依赖于JavaScript,但今天我们将探讨如何利用纯CSS实现图片预加载,从而摆脱对JavaScript的依赖。 ### 为什么需要图片预加载? 在网页中,当用户滚动页面时,如果图片没有预先加载,可能会...

    瀑布流+图片预加载实例

    在这个实例中,我们将探讨如何实现瀑布流效果,并结合图片预加载技术来提升用户体验。 首先,`style.css`文件通常包含了实现瀑布流布局所需的CSS样式。瀑布流布局的关键在于利用CSS的`float`属性或`display: inline...

    图片预加载学习(一):无序加载之图片切换

    此外,`js`文件很可能是用于处理预加载逻辑的JavaScript代码。 7. **图片预加载的特点**: - **提高用户体验**:减少了用户等待时间,提高了页面响应速度。 - **节省带宽**:通过合理策略,只加载必要的图片,...

    手机端h5页面适配+预加载+获取资源加载进度模板

    - **图片预加载**:使用JavaScript创建Image对象,提前加载图片资源,避免用户在滚动页面时出现延迟加载的现象。 - **CSS预加载**:通过CSS Sprites技术将多个小图标合并成一张大图,减少HTTP请求次数,提高加载...

    利用CSS、JavaScript及Ajax实现图片预加载的方法

    另一种JavaScript预加载方法是创建一个新的`Image`对象,并为其`src`属性赋值为要预加载的图片URL。这可以通过循环遍历一个包含多个图片URL的数组来实现。这种方法更加灵活,可以预加载任意数量的图片,而不需要预先...

    图片预加载的js

    本文将详细介绍如何使用JavaScript和jQuery来实现这一功能,以及如何检测预加载的完成状态并在此基础上执行其他操作。 ### 1. 图片预加载的重要性 预加载图片可以减少用户等待时间,特别是在处理大量图片或者高...

    jquery实现图片预加载技术,使得图片加载更为流畅,和谐。

    为了提高页面加载效率和用户浏览的流畅性,我们可以采用图片预加载技术。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,可以帮助我们实现这一目标。本篇文章将深入探讨如何使用jQuery实现图片预加载,...

    利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    另一种纯JavaScript预加载的方法是创建`Image`对象并设置其`src`属性。这可以在页面加载前或加载后执行,以确保图片在需要时已经准备好。例如: ```javascript function preload() { for (i = 0; i ; i++) { ...

    利用CSS、JavaScript及Ajax实现高效的图片预加载

    虽然用于图片预加载的场景比较特殊,但原理上与JavaScript预加载相似。 结合Ajax预加载图片,可以利用XMLHttpRequest对象来请求图片文件,并获取其内容。但这种方法不太常见,因为图片加载对用户是可见的,而Ajax...

Global site tag (gtag.js) - Google Analytics