在继续之前验证所有图像是否已加载到 `$(window).load()` 函数中

发布于 2024-09-18 10:14:21 字数 687 浏览 10 评论 0原文

我正在向页面添加一些用于幻灯片放映的大图像，但我想仅在页面的正常部分完全加载（包括图像）时才开始加载这些图像。

为此，我将图像添加到 $(window).load() 函数中：

var slide_total = 20;

$(window).load(function() {

    for (i = 2; i <= slide_total; i++)
    {
        content = '<li><img src="/images/header' + ((i < 10) ? '0' : '') + i + '.jpg" width="960" height="314"></li>';
        $("#slideshow li:last-child").after(content);
    }

    slide_interval = setInterval( "slideSwitch()", slide_duration );

});

幻灯片放映 slideSwitch() 应在所有图像完全加载后开始，但就像现在一样，它是在元素添加到 DOM 时开始的。

我无法将循环移至 document.ready 函数，因为我不希望幻灯片放映干扰正常图像的加载。

在设置间隔之前如何检查是否所有图像都已加载？

原文

I am adding a number of large images for a slide-show to a page, but I want to start loading these images only when the normal part of the page is completely loaded (including the images).

To do that, I am adding the images in the $(window).load() function:

var slide_total = 20;

$(window).load(function() {

    for (i = 2; i <= slide_total; i++)
    {
        content = '<li><img src="/images/header' + ((i < 10) ? '0' : '') + i + '.jpg" width="960" height="314"></li>';
        $("#slideshow li:last-child").after(content);
    }

    slide_interval = setInterval( "slideSwitch()", slide_duration );

});

The slide-show slideSwitch() should start when all images are loaded completely, but as it is now, it starts the moment the elements are added to the DOM.

I cannot move the loop to the document.ready function as I don´t want the slide-show to interfere with the loading of the normal images.

How can I check whether all images are loaded before setting the interval?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

離殇 2024-09-25 10:14:21

试试这个：

// get the total number of images inserted in the DOM
var imgCount = $('#slideshow img').length;

// initialize a counter which increments whenever an image finishes loading
var loadCounter = 0;

// bind to the images' load event
$("#slideshow li img").load(function() {

    // increment the load counter
    loadCounter++;

    // once the load counter equals the total number of images
    // set off the fancy stuff
    if(loadCounter == imgCount) {
        slide_interval = setInterval( "slideSwitch()", slide_duration );
    }
}).each(function() {

    // trigger the load event in case the image has been cached by the browser
    if(this.complete) $(this).trigger('load');
});

Try this:

// get the total number of images inserted in the DOM
var imgCount = $('#slideshow img').length;

// initialize a counter which increments whenever an image finishes loading
var loadCounter = 0;

// bind to the images' load event
$("#slideshow li img").load(function() {

    // increment the load counter
    loadCounter++;

    // once the load counter equals the total number of images
    // set off the fancy stuff
    if(loadCounter == imgCount) {
        slide_interval = setInterval( "slideSwitch()", slide_duration );
    }
}).each(function() {

    // trigger the load event in case the image has been cached by the browser
    if(this.complete) $(this).trigger('load');
});

回复收藏 0 原文

~没有更多了~