图像而不是复选框工作缓慢

时间:2012-09-30 08:15:53

标签: javascript html performance checkbox image

我用图片切换了我的复选框,但现在当我点击其中一个复选框时,它会在检查的img出现之前花费2秒钟。

这种情况只发生在我第一次点击复选框时,第二次等等。它完美无缺。

可能在你将img加载到网站内存后点击复选框后,它会顺利运行。

有解决方案吗? 也许当页面加载时,它可以加载任何可选的img作为其内存或类似的东西。

提前致谢。

这是我的website,它是希伯来文,但内容并不重要。

我使用重力形式,但对于这种情况它并不重要。 代码中的样本在下面,感谢每个人。

.DesignCheckBox label {
                   background-repeat: no-repeat;
                   border: 2px solid #DDD;
                           height: 150px!important;
                           font-size: 150%;
                           -moz-border-radius: 20px;
                           -webkit-border-radius: 20px;
                border-radius: 20px; 
                -khtml-border-radius: 20px; 
                                                  }
.DesignCheckBox label:hover {
                   border: 2px solid #000095;
                           background-color:  #F0F7F7;
                           cursor: hand; cursor: pointer;
                                                  }

.HideCheckBox input[type="checkbox"]{display:none!important;}

         li.gchoice_4_1 label {
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/XCellcom.gif);
                               }

         li.gchoice_4_1 input[type="checkbox"]:checked + label { 
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/VCellcom.gif);
                       }

         li.gchoice_4_2 label {
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/XOrange.gif);
                               }

         li.gchoice_4_2 input[type="checkbox"]:checked + label { 
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/VOrange.gif); 
                       }

1 个答案:

答案 0 :(得分:0)

你说得对,实际上浏览器只加载页面加载时要提供的页面所需的那些图像。其他事件仅在被解雇而不是下载所需图像时,一旦下载它将被存储在您的浏览器缓存中。这意味着下次您将获得更快的响应,因为图像现在在您的本地计算机上。

我在这里建议的是使用等于无显示来隐藏图像。在页面上加载设置为显示无图像用于选中图像,单击设置显示为阻止选中图像。

如果您需要这些代码段,请提供一些代码。