Question

我需要了解图像预加载在浏览器中的工作原理。可以说我有这段代码：

<script type="text/javascript" language="JavaScript">
    companyLogo = new Image();
    companyLogo.src = "/images/image1.jpg"
</script>

然后在我的页面下面某处我跟随。

<img src= "/images/image1.jpg" />

现在你可以看到，首先我预装了图片/ images / image1.jpg 然后我在我的图片标签中使用它。

我的网站上有产品图片，非常高清，我的整个页面有时会在加载主图片时挂起。我不介意尺寸对我的图像来说很大，我想要做的是....继续加载内容和页面的页面。其他元素并在加载后立即显示图像（但不要因为图像尚未加载而暂停/暂停页面）。

现在上面的方法，它究竟做了什么？它是否在缓存中预加载图像并等待并挂起页面？或者它完全符合我的目的？

由于

Answer 1

虽然听起来你应该优化你的图像，但我很乐意向你展示我将如何做到这一点。

不要包含图像src，将其隐藏在数据中。（使用正确的宽度和高度，以便在最终加载时页面不会跳转。）

<img src="1px.gif" data-src="http://the.real.src" class="justyouwait" style="width:10000000px; height:1000000px;" />

然后在dom准备就绪，即当您的页面已加载时，加载它们

$(function(){
    $('img.justyouwait').each(function(){
        $(this).attr('src', $(this).data('src'));
    });
});

或者添加一点好感

$('img.justyouwait').each(function(){
    $(this).css({opacity:0}).load(function(){
        $(this).animate({opacity:1},1000); // fade them in
    }).attr('src', $(this).data('src'));
});

Answer 2

我会在DOMReady上做。但它本质上是尝试在加载页面的同时加载文件，应该没有挂起。但是它不会“懒惰”加载图像。通常这种技术用于加载可能需要的图像。我会首先在HTML中加载一个低分辨率，并在高分辨率图像准备好后通过javascript更新图像。或者更好的是，只需加载一个Web安全图像，并为用户提供高分辨率的链接（如果需要）。

强迫人们下载高分辨率图像的坏主意。这是让人们避开你的网站的好方法。

编辑：

所以你可以这样做：

<img src="src/to/placeholder.jpg" data-path="path/to/high/res.jpg" class="lazyload"/>

然后有一个javascript函数做：

$('.lazyload').each(function(){
    $(this).attr('src',$(this).data('path'));
});

不确定我的代码是否准确，但您明白了。

编辑：当DOM加载时，您基本上为所有产品图像加载相同的占位符图像。在后台，javascript根据数据路径中的路径请求真实图像。然后，当图像加载完成后，占位符源将使用更好的图像进行更新。如果你愿意，可以添加一些淡入淡出或其他任何东西。

Answer 3

我写了这个简单的jQuery插件来帮助解决这个问题。

<强> imgur.js

/*
    Plugin: IMGUR
    Author: Drew Dahlman ( www.drewdahlman.com )
    Version: 0.0.2
*/

    (function($) {

        $.fn.imgur = function(options,loaded) {
            var defaults = {
                img: '',
            }

            if(loaded){
                var callback = {
                    loaded: loaded
                }
            }

            return this.each(function() {

                var settings = $.extend(defaults,options);
                var callbacks = $.extend(callback,loaded);
                var _image;

                var $this = $(this);

                function init(){
                    if(callbacks.loaded != null){
                        _image = new Image();
                        _image.onLoad = loaded();
                        _image.src = settings.img;
                    }
                }
                function loaded(){
                    if(callbacks.loaded != null){
                        callbacks.loaded($this,settings.img);
                    }
                }
                init();
        });
        };

    })(jQuery);

如何使用

如果你要加载多个图像，你的html中的

会指定一个类。

<img src='' data-image='images/image1.jpg' class='preload'/>

然后在你的javascript调用中（假设你使用的是jQuery）

<script>
$(".preload").each(function(){
 var $this = $(this);
 $this.imgur({
  img: $this.data('image') // in your case
 },function(el,data){
   el.attr('src',data);
 });
});
</script>

这将使用数据图像加载图像，然后在加载图像时，它会将该数据添加到您提供的元素中。

喝彩！

javascript＆amp;图像预加载

3 个答案: