Question

假设我的html文档中有几个img标记，所有这些标记都应该以幻灯片形式显示，一次显示一个图像。

<div id="gallery">
    <img class="slide" src="images/1.png" width="600" height="400" alt=""/>
    <img class="slide" src="images/2.png" width="600" height="400" alt=""/>
    <img class="slide" src="images/3.png" width="600" height="400" alt=""/>
    <img class="slide" src="images/4.png" width="600" height="400" alt=""/>
</div>

我不希望显示这些图像，直到它们全部加载，一旦加载完毕，我想将它们作为幻灯片放映（该部分并不重要）。

我无法理解它是如何工作的是在隐藏时加载图像。假设我在$ .ready之后用display:none隐藏它们，这是否会阻止它们在某些浏览器中加载？如果我让它们可见，则在加载所有图像之前可能会出现一些图像，这是不合需要的。我不想使用ajax加载它们。

我再次尝试做的事情：

将图片放在html中，而不是用ajax
在加载所有这些内容之前不要显示它们

有些建议如何实现这一目标？我对加载所有内容时如何显示它们不感兴趣，我对如何在加载时隐藏它们以及它们仍然会加载感兴趣。谢谢！

Answer 1

首先，您需要确保最初没有图像显示。为此，您需要更改样式表。

请注意，仅因为css设置为display: none，不意味着浏览器不会加载它。浏览器仍然加载图像，它根本不显示它。

在这样的情况下，你在样式表中做了什么：

/* prevent images from being displayed before they are loaded ready */
#gallery img {
    display: none;
}

然后，使用一些jQuery，在完全加载时显示图像：

jQuery(function($) {
    $('#gallery img').load(
        function() {
            $(this).show();
        }
    );
});

这会在加载时显示每个图像。

或
如果你想等到所有加载它们，你的jQuery会有所不同：

jQuery(function($) { // Get count of images var icount = $('#gallery img').length; // Initialize count to track loaded images var lcount = 0; $('#gallery img').load( function() { // If the loaded images is equal to the total images, show them all if (++lcount >= icount) { $('#gallery img').show(); } } ); });

或
最后，如果你只是想在显示它们之前等到整个页面，那么使用这个jQuery：

jQuery(window).load(function($) { $('#gallery img').show(); });

Answer 2

确保图像加载且不会出现任何问题的最佳简便解决方案是：

.preload{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

并添加图片副本＆＃39; html里面的预载。

Answer 3

在javascript中加载

(function(){
    imgURLs = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg'];
    imgs = [];
    var i = 0,
        len = imgURLs.length;
    loadAsset();

    function loadAsset(){
        if (i < len){

            imgs[i] = new Image();
            imgs[i].src = imgURLs[i];
            imgs[i].onload = function(){
                i++;
                loadAsset();
            }
        } else {
            //some init function for the slideshow
            initSlideShow();
        }
    }
})();

Answer 4

您可以使用jQuery“Deferred”对象加载图像，也称为promise。

var promises = [];
$('#gallery .slide').each(function(){
    var promise = $.Deferred();
    $(this).load(function(){ promise.resolve();} );
    promises.push(promise);
});
$.when.apply($,promises).then(function(){
    $('#gallery .slide').show();
});

http://api.jquery.com/category/deferred-object/

JS / CSS：隐藏HTML文件时预加载图像

4 个答案: