Mass onLoad 事件冻结 gif 动画

发布于 2024-12-19 19:38:24 字数 930 浏览 1 评论 0原文

我试图制作简单的负载指示器，但在这种情况下我被卡住了......

我们有

#submit 按钮
当 onClick 到 #submit 时 >，我们获取 getJSON
图像 url（可能是 1-1000++ url），
JSON 数据 - 是.each src 的

我们检查 onLoad

如果已加载我们 .append html 到 div #out





<脚本类型=“text/javascript”>

$('#submit').click(function()
{
    $.getJSON('/data.json', 函数(数据) {

        $.each(数据, 函数(idx, img_src) {

            $('').load(function() {
                $('#out').append('');
            });     

        });

    });

});

在我的示例中，我不显示/隐藏 load.gif，目前，nvm 显示了主要问题 - 当脚本运行时动画冻结。

在 jQuery 1.7.1 + Chrome 17 上测试（我的应用程序专门针对该浏览器）

原文

I trying to make trivial load indicator, but in this case I'm stuck...

What we have

#submit button
when onClick to #submit, we fetch getJSON
JSON data - is urls of images (might be 1-1000++ urls)
for .each src we check onLoad

and if its loaded we .append html to div #out

<img id="load" src="load.gif" />
<input id="submit" type="submit" value="submit" />
<div id="out"></div>

<script type="text/javascript">

$('#submit').click(function()
{
    $.getJSON('/data.json', function(data) {

        $.each(data, function(idx, img_src) {

            $('<img src="'+img_src+'">').load(function() {
                $('#out').append('<img id="id'+idx+'" src="'+img_src+'">');
            });     

        });

    });

});

In my example I don't show/hide load.gif,
nvm for now, it shows the main problem - animation freezes when script works.

Tested on jQuery 1.7.1 + Chrome 17 (my app special for this browser)

分享到QQ

分享到微博

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

发布评论

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

以可爱出名 2024-12-26 19:38:24

如果您想在加载无数图像时给浏览器一些周期来做其他事情，您可以在一系列 setTimeout() 调用上做少量工作，以允许在加载之间发生一些其他事情你的工作是这样的：

$('#submit').click(function() {
    $.getJSON('/data.json', function(data) {
        var i = 0;
        var out$ = $('#out'); 
        function appendNextImage() {
            // assumes data is an array of image URLs
            $('<img id="id'+i+'" src="'+data[i]+'">').load(function() {
                out$.append(this);
            });
            i++;
            if (i < data.length) {
                setTimeout(appendNextImage, 1);
            }
        }
        appendNextImage();
    });
});

我还改变了你的图像创建，所以你附加你已经创建的 DOM 对象，而不是制作第二个重复的 DOM 对象并放置 $('#out') jQuery 对象在一个闭包中，所以它不是每次都重新创建。

由于我无法在此编码结构中使用 jQuery 的 .each()，因此我必须手动迭代您的数据。我假设它是一个 URL 数组。

If you want to give the browser some cycles to do other things while loading a zillion images, you can do a small amount of work on a series of setTimeout() calls to allow some other things to happen between your chunks of work like this:

$('#submit').click(function() {
    $.getJSON('/data.json', function(data) {
        var i = 0;
        var out$ = $('#out'); 
        function appendNextImage() {
            // assumes data is an array of image URLs
            $('<img id="id'+i+'" src="'+data[i]+'">').load(function() {
                out$.append(this);
            });
            i++;
            if (i < data.length) {
                setTimeout(appendNextImage, 1);
            }
        }
        appendNextImage();
    });
});

I also changed your image creation so you append the DOM object that you've already created rather than making a second duplicate DOM object and put the $('#out') jQuery object in a closure so it isn't recreated every time.

Since I can't use jQuery's .each() in this coding structure, I had to manually iterate through your data. I assumed that it's an array of URLs.

回复收藏 0 原文

~没有更多了~