很多小图片 [英] Many small images

问题描述

我正在JS中编写一个模式机。


我使用小型（20-50px）动态创建的div（100-200）并使用循环来

以预定义的模式将它们放在

中。我在创建时为它们分配了样式道具。


问题：

当将背景图像分配给div的样式对象时，它需要

10 - 12秒

它们会显示在屏幕上。现在我对所有

div使用相同的图像（2kB）。


它看起来像这样：


var src =" url（someImage.jpg）" ;;

for（var i = 0; i< arrayDivs.length; i ++）

{

myDiv.style.backgroundImage = src;

}


我有一台中速机器，测试在本地完成。

我非常想让这项工作更快。

如果你知道任何可以用来加快这个过程的技巧，请

告诉我。


Oeyvind


-
http://home.online.no/~oeyvtoft/ToftWeb/


class =h2_lin>解决方案

" oeyvind toft" < OE ****** @ online.no>在消息中写道

新闻：F3 ******************** @ news2.e.nsc.no ...

我正在JS中编写一个模式机。

我使用小型（20-50px）动态创建的div（100-200）并使用循环来放置它们以预定义的模式。我在创建时为它们分配了样式道具。

问题：
将背景图像分配给div的样式对象时，
需要10到12秒才能完成它们显示在屏幕上。现在我用
所有div使用相同的图像（2kB）。

它看起来像这样：

var src =" url（someImage .jpg）" ;;
for（var i = 0; i< arrayDivs.length; i ++）
myDiv.style.backgroundImage = src;


试试

arrayDivs [i] .style.backgroundImage =''url（''+ src +''）'';

}

我有一台中等速度的机器，测试是在本地完成的。
我非常想让这项工作更快。
如果你知道任何技巧可以用来加快这个过程请告诉我。

Oeyvind

-
http://home.online.no/~oeyvtoft/ToftWeb/

" J. J. Cale < pH值**** @ netvision.net.il>在消息中写道

news：41 ******** @ news.012.net.il ...

oeyvind toft < OE ****** @ online.no>在消息中写道
新闻：F3 ******************** @ news2.e.nsc.no ...

I在JS中编写模式机器。

我使用小型（20-50px）动态创建的div（100-200）并使用循环将它们放置在预定义的模式中。我在创建时为它们分配了样式道具。

问题：
当将背景图像分配给div的样式对象时，它需要

10 - 12它们显示在屏幕上之前的几秒钟。现在我使用相同的图像（2kB）

所有

divs。

它看起来像这样：

var src =" url（someImage.jpg）" ;;
for（var i = 0; i< arrayDivs.length; i ++）
{
myDiv.style .backgroundImage = src;

尝试
arrayDivs [i] .style.backgroundImage =''url（''+ src +''）'';

oops

我的意思是arrayDivs [i] .style.background =''url（''+ src +''）'';

}

我有一台中等速度的机器，测试是在本地完成的。
我非常想让这项工作更快。
如果你知道任何技巧可以用来加快这个过程请
通知我。

Oeyvind

-
http://home.online.no/~oeyvtoft/ToftWeb/

感谢您的建议JJ。


我已经尝试过您的建议，但我没有看到速度上的任何差异。


我想知道是否有其他方法来设置整个事情。东西

类似

预加载图片。通过一个循环只需要很长时间

将图像分配给

divs bg。


Oeyvind

-
http：/ /home.online.no/~oeyvtoft/ToftWeb/


" J. J. Cale < pH值**** @ netvision.net.il> skrev i melding

新闻：41 ******** @ news.012.net.il ...

J。 J. Cale < pH值**** @ netvision.net.il>在消息中写道
新闻：41 ******** @ news.012.net.il ...

" oeyvind toft" < OE ****** @ online.no>在消息中写道
新闻：F3 ******************** @ news2.e.nsc.no ...

I在JS中编写模式机器。

我使用小型（20-50px）动态创建的div（100-200）并使用循环
将它们放置在预定义的模式中。我在创建时为它们分配了样式道具。

问题：
当将背景图像分配给div的样式对象时，它

需要

10 - 12秒
它们显示在屏幕上。现在我对所有

div使用相同的图像（2kB）

。

它看起来像这样：

var src =" url（someImage.jpg）" ;;
for（var i = 0; i< arrayDivs.length; i ++）
{
myDiv.style .backgroundImage = src;

尝试
arrayDivs [i] .style.backgroundImage =''url（''+ src +''）'';

oops
我的意思是arrayDivs [i] .style.background =''url（''+ src +''）'';

}

我有一台中等速度的机器，测试是在本地完成的。
我非常想让这项工作更快。
如果你知道任何技巧可以用来加快这个过程请
通知我。

Oeyvind

-
http://home.online.no/~oeyvtoft/ToftWeb/

I`m writing a pattern machine in JS.

I use small (20-50px) dynamicly created divs (100-200) and use loops to
place them
in predefined patterns. I assign style props to them at creation time.

Problem:
When assigning a background image to the style object of the divs, it takes
10 - 12 seconds before
they are displayed on screen. For now I`ve used the same image (2kB) for all
divs.

It looks something like this:

var src = "url(someImage.jpg)";
for(var i = 0; i < arrayDivs.length; i++)
{
myDiv.style.backgroundImage = src;
}

I have a medium fast machine and the testing is done locally.
I would very much like to have this work faster.
If you know any tricks that can be used to speed up the process please
inform me.

Oeyvind

--
http://home.online.no/~oeyvtoft/ToftWeb/

解决方案

"oeyvind toft" <oe******@online.no> wrote in message
news:F3********************@news2.e.nsc.no...

I`m writing a pattern machine in JS.

I use small (20-50px) dynamicly created divs (100-200) and use loops to
place them
in predefined patterns. I assign style props to them at creation time.

Problem:
When assigning a background image to the style object of the divs, it takes 10 - 12 seconds before
they are displayed on screen. For now I`ve used the same image (2kB) for all divs.

It looks something like this:

var src = "url(someImage.jpg)";
for(var i = 0; i < arrayDivs.length; i++)
{
myDiv.style.backgroundImage = src;
try
arrayDivs[i].style.backgroundImage = ''url(''+src+'')'';
}

I have a medium fast machine and the testing is done locally.
I would very much like to have this work faster.
If you know any tricks that can be used to speed up the process please
inform me.

Oeyvind

--
http://home.online.no/~oeyvtoft/ToftWeb/

"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...

"oeyvind toft" <oe******@online.no> wrote in message
news:F3********************@news2.e.nsc.no...

I`m writing a pattern machine in JS.

I use small (20-50px) dynamicly created divs (100-200) and use loops to
place them
in predefined patterns. I assign style props to them at creation time.

Problem:
When assigning a background image to the style object of the divs, it takes

10 - 12 seconds before
they are displayed on screen. For now I`ve used the same image (2kB) for

all

divs.

It looks something like this:

var src = "url(someImage.jpg)";
for(var i = 0; i < arrayDivs.length; i++)
{
myDiv.style.backgroundImage = src;

try
arrayDivs[i].style.backgroundImage = ''url(''+src+'')'';

oops
I meant arrayDivs[i].style.background = ''url(''+src+'')'';

}

I have a medium fast machine and the testing is done locally.
I would very much like to have this work faster.
If you know any tricks that can be used to speed up the process please
inform me.

Oeyvind

--
http://home.online.no/~oeyvtoft/ToftWeb/

Thanks for the advice JJ.

I`ve tried your suggestion but I dont see any difference in speed.

I`m wondering if there are other ways to set up the whole thing. Something
similar
to preloading images. It just take too long time going through a loop
assigning the image to
the divs bg.

Oeyvind

--
http://home.online.no/~oeyvtoft/ToftWeb/

"J. J. Cale" <ph****@netvision.net.il> skrev i melding
news:41********@news.012.net.il...

"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...

"oeyvind toft" <oe******@online.no> wrote in message
news:F3********************@news2.e.nsc.no...

I`m writing a pattern machine in JS.

I use small (20-50px) dynamicly created divs (100-200) and use loops to place them
in predefined patterns. I assign style props to them at creation time.

Problem:
When assigning a background image to the style object of the divs, it

takes

10 - 12 seconds before
they are displayed on screen. For now I`ve used the same image (2kB)

for all

divs.

It looks something like this:

var src = "url(someImage.jpg)";
for(var i = 0; i < arrayDivs.length; i++)
{
myDiv.style.backgroundImage = src;

try
arrayDivs[i].style.backgroundImage = ''url(''+src+'')'';

oops
I meant arrayDivs[i].style.background = ''url(''+src+'')'';

}

I have a medium fast machine and the testing is done locally.
I would very much like to have this work faster.
If you know any tricks that can be used to speed up the process please
inform me.

Oeyvind

--
http://home.online.no/~oeyvtoft/ToftWeb/

这篇关于很多小图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！