1

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

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

然后在我的页面下方的某个地方我有以下内容。

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

现在如您所见，首先我预加载了图像/images/image1.jpg然后我在我的图像标签中使用它。

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

现在上面的方法，它到底是做什么的？它是否将图像预加载到缓存中并等待并挂起页面？或者它正是我想要做的？

谢谢

4

3 回答 3

4

虽然听起来您应该优化图像，但我很高兴向您展示我将如何做到这一点。

不要包含图像 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'));
});
于 2013-01-17T23:21:46.607 回答
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 根据 data-path 中的路径请求真实图像。然后，当图像完成加载时，占位符源会更新为更好的图像。添加一些淡入淡出或任何你喜欢的东西。

于 2013-01-17T23:19:36.547 回答
0

我编写了这个简单的 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>

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

干杯！

于 2013-01-17T23:45:06.753 回答