利用JavaScript、Ajax及CSS3实现图片预加载

最新推荐文章于 2022-01-27 10:29:09 发布

sweetyhyh

最新推荐文章于 2022-01-27 10:29:09 发布

阅读量84

点赞数

分类专栏： Web前端 HTML5+CSS3 Jquery JavaScript

本文链接：https://blog.csdn.net/sweetyhyh/article/details/71112793

版权

Web前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML5+CSS3

8 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

导语

多图片网页很多都用了预加载图像，预加载图像是改善用户体验的好方法。但苦于网上找好资料不容易，特地翻墙研究了两篇，一起参考学习

仅使用JavaScript实现预加载

像以前的方法一样有效，我通常认为实际上实在太乏味和耗时。相反，我通常更喜欢使用直线切片JavaScript来预加载图像。以下是几种仅限JavaScript的预加载方法，可在几乎每个现代浏览器中精美地工作。

JavaScript方法1
不引人注意，优雅地降级，易于实现，只需编辑/添加图像路径/名称，无需其他编辑：

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "http://domain.tld/gallery/image-001.jpg",
                "http://domain.tld/gallery/image-002.jpg",
                "http://domain.tld/gallery/image-003.jpg"
            )
        //--><!]]>
    </script>
</div>

该方法对于预加载大量图像特别方便。在我的一个画廊网站上，我使用这种技术来预加载近50张图像。通过将此脚本包含在登录页面以及内部金额页面上，大多数图库图像都将在用户输入登录凭据之前预先加载。很不错。

JavaScript方法2

这是另一个类似的方法，它使用不引人注目的JavaScript来预加载任何数量的图像。只需将以下脚本包含在您的任何网页中，然后根据以下说明进行编辑：

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--

        if (document.images) {
                img1 = new Image();
                img2 = new Image();
                img3 = new Image();

                img1.src = "http://domain.tld/path/to/image-001.gif";
                img2.src = "http://domain.tld/path/to/image-002.gif";
                img3.src = "http://domain.tld/path/to/image-003.gif";
            }

        //--><!]]>
    </script>
</div>

正如你所看到的，每个预加载的图像需要一个变量定义，“img1 = new Image（）;”，以及源声明“img3.src =”../path/to/image-003.gif“; “。通过复制图案，您可以根据需要预先加载多张图像。

我们甚至可以通过延迟预加载直到页面加载之后改进此方法。为此，我们只需将脚本包装在一个函数中，并使用addLoadEvent（）来使其工作：

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();

        img1.src = "http://domain.tld/path/to/image-001.gif";
        img2.src = "http://domain.tld/path/to/image-002.gif";
        img3.src = "http://domain.tld/path/to/image-003.gif";
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);

使用Ajax实现预加载

好像所有这些都不够酷，这里是使用Ajax预加载图像的一种方法。这种方法是在极客和字母处发现的，并且使用DOM来预加载图像，但CSS，JavaScript和其他任何东西。使用Ajax优于直接JavaScript的主要优点是可以预先加载JavaScript和CSS文件，而不影响当前页面。对于图像，这不是一个真正的问题，但该方法是干净和有效的。

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.css');
        xhr.send('');
        // preload image
        new Image().src = "http://domain.tld/preload.png";
    }, 1000);
};

就这样，这段代码将预装三个文件：“preload.js”，“preload.css”和“preload.png”。还设置了1000ms的超时时间，以防止脚本挂起并导致正常页面功能的问题。

为了包装起来，我们来看看这个预加载会话如何用纯JavaScript语言编写：

window.onload = function() {

    setTimeout(function() {

        // reference to <head>
        var head = document.getElementsByTagName('head')[0];

        // a new CSS
        var css = document.createElement('link');
        css.type = "text/css";
        css.rel  = "stylesheet";
        css.href = "http://domain.tld/preload.css";

        // a new JS
        var js  = document.createElement("script");
        js.type = "text/javascript";
        js.src  = "http://domain.tld/preload.js";

        // preload JS and CSS
        head.appendChild(css);
        head.appendChild(js);

        // preload image
        new Image().src = "http://domain.tld/preload.png";

    }, 1000);

};

在这里，我们通过DOM创建三个元素来加载我们的三个文件。如原始文章所述，在预加载的文件内容不应用于加载页面的情况下，此方法不如Ajax方法。

CSS3实现图片预加载

使用纯CSS3预览图像的更好的方式打击我:

.preload-images {
    background: url(image-01.png) no-repeat -9999px -9999px;
    background: url(image-01.png) no-repeat -9999px -9999px,
            url(image-02.png) no-repeat -9999px -9999px,
            url(image-03.png) no-repeat -9999px -9999px,
            url(image-04.png) no-repeat -9999px -9999px,
            url(image-05.png) no-repeat -9999px -9999px;
    }

使用CSS3对多个背景图像的新支持，我们可以使用单个现有元素来预加载所有所需的图像。将此方法与使用CSS预先加载图像的旧方法进行比较：

.preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }  
.preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }  
.preload-03 { background: url(image-03.png) no-repeat -9999px -9999px; }
.preload-04 { background: url(image-04.png) no-repeat -9999px -9999px; }
.preload-05 { background: url(image-05.png) no-repeat -9999px -9999px; }

您可以看到，CSS3方法是使用单个CSS选择器预先加载图像的更为清洁的方法。请注意，我们还需要确保在preload元素中不显示背景图像。为此，我想我们可以使用display：none隐藏元素，或者使用-9999px定位将图像远离屏幕。

sweetyhyh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript、Ajax及CSS3实现图片预加载

导语多图片网页很多都用了预加载图像，预加载图像是改善用户体验的好方法。但苦于网上找好资料不容易，特地翻墙研究了两篇，一起参考学习仅使用JavaScript实现预加载像以前的方法一样有效，我通常认为实际上实在太乏味和耗时。相反，我通常更喜欢使用直线切片JavaScript来预加载图像。以下是几种仅限JavaScript的预加载方法，可在几乎每个现代浏览器中
复制链接

扫一扫

专栏目录