检查 jquery 插件启动前是否加载了图像

发布于 2024-12-03 00:06:38 字数 343 浏览 1 评论 0原文

例如我有一个 imageslider 插件。

<div class="images">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    .... 
</div>
$('.images').slider();

如何在插件(任何骨架)中指定仅在加载所有图像时才启动插件?是否像使用 .load() 方法并在每次加载图像时添加到变量一样。然后,一旦达到图像总数,就调用插件吗?但我怎样才能“暂停”插件呢?

谢谢大家,但我确实提到了一个框架 jquery 插件本身,图像加载后我将如何调用该插件?

For e.g I have a imageslider plugin.

<div class="images">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    .... 
</div>
$('.images').slider();

How can I specify in the plugin(any skeleton) that I want to start the plugin only when all images are loaded? Is it like e.g using a .load() method and adding to a variable everytime an image has loaded. Then once it reaches total number of images, call the plugin? But how can I 'pause' the plugin?

Thanks everyone, but I did mention IN a skeleton jquery plugin itself, how would i call the plugin after the images have loaded?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(4

南笙 2024-12-10 00:06:38
$(window).load(function() {
  $('.images').slider();
});

$(window).load 将等待所有图像加载到页面上。

如果您需要知道该特定 div 中的图像何时完成加载,请参阅此问题中的答案:如何知道特定“div”内的所有图像何时加载?

$(window).load(function() {
  $('.images').slider();
});

$(window).load will wait until all images are loaded on the page.

If you need to know when the images have finished loading in that particular div, please see the answers in this question: How to know when all images inside a specific "div" are loaded?

随风而去 2024-12-10 00:06:38

您可以在 window.load 事件 上执行插件,如下所示:

$(window).load(function () {
  $('.images').slider();
});

这与更常用的 document.ready 事件相反:

$(document).ready(function () {
  $('.images').slider();
});

关键区别在于后者将在 DOM 加载完成时执行,而前者将等到 DOM 引用的所有资源为止DOM 已加载。请注意,如果即使在图像准备好后另一个资源也需要很长时间才能加载,那么它将阻止插件直到加载或超时。

You can execute the plugin on the window.load event like so:

$(window).load(function () {
  $('.images').slider();
});

This is as opposed to the much more commonly used document.ready event:

$(document).ready(function () {
  $('.images').slider();
});

The key difference is that the latter will execute when the DOM is finished loading, while the former will wait until all resources referenced by the DOM are loaded. Note that if another resource is taking a long time to load even after the images are ready, then it will hold up the plugin until it loads or times out.

望她远 2024-12-10 00:06:38

您可以尝试此操作,这将在加载所有图像后初始化插件。

$(function(){
   var imageCount = $(".images img").length;
   $(".images img").load(function(){
       imageCount--;
       if(imageCount == 0){
          $(this).parent().slider();
       }
   });
});

You can try this which will initialize the plugin after all the images are loaded.

$(function(){
   var imageCount = $(".images img").length;
   $(".images img").load(function(){
       imageCount--;
       if(imageCount == 0){
          $(this).parent().slider();
       }
   });
});
千笙结 2024-12-10 00:06:38

要检查该元素中的所有图像有点棘手,但可以完成。

//gather the total number of images
var imageNum = $('.images').find('img').length;
var imagesLoaded = 0;
//setup a load event for each img
$('.images img').each(function(){
    //load event will fire inconsistently in IE/FF so we create a new dom element but don't insert it
    $('<img>').load(function(){
        imagesLoaded++;
        //all images are loaded so fire the slider
        if(imagesLoaded == imageNum){
            $('.images').slider();
        }
    //we set the new img to have the src of the current image
    }).attr('src', $(this).attr('src'));
});

它有点笨重,但应该可以工作。

To check for all the images in just that element is a little tricky, but can be done.

//gather the total number of images
var imageNum = $('.images').find('img').length;
var imagesLoaded = 0;
//setup a load event for each img
$('.images img').each(function(){
    //load event will fire inconsistently in IE/FF so we create a new dom element but don't insert it
    $('<img>').load(function(){
        imagesLoaded++;
        //all images are loaded so fire the slider
        if(imagesLoaded == imageNum){
            $('.images').slider();
        }
    //we set the new img to have the src of the current image
    }).attr('src', $(this).attr('src'));
});

It's a little clunky, but should work.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文