触发选择选项后,Jquery加载徽标

时间:2014-01-29 19:16:45

标签: jquery html image performance

我有一个表单,其底部是select徽标下拉选项。 select中的选项是使用这段代码从根目录中的文件夹设置的。

  

$ dirs = glob('*',GLOB_ONLYDIR);

这些导演持有徽标:

示例:轮胎:所有轮胎公司徽标,制动器:所有制动公司徽标等。

下拉类似于这个想法,但它不是红色,蓝色,绿色,而是加载徽标 - > jsfiddle.net/FvMYz

之后,根据用户的选择,当用户在选择徽标选项菜单中选择不同的选项时,图像会从这些文件夹加载。

我的问题是,此时我已经有超过400个徽标,而且我很快就会变成1000个,当页面加载时会因为客户端点击表单页面时加载的图像数量而出现延迟。 / p>

我听说过懒惰的加载插件,但我不确定这种方法是否适用于这种情况,任何人都有任何建议如何处理这个问题,或者正确指出如何解决这个问题滞后问题?

编辑:对不起,我想尽力解释一下。好的,页面加载,没有加载图像。当他们填写表格并进入徽标下拉选择选项,并选择轮胎,它加载轮胎徽标,我不希望这些徽标加载,直到他们实际选择该选项。这将避免一次加载所有400多个图像,直到客户端进入页面。

1 个答案:

答案 0 :(得分:0)

在评论部分讨论之后,这是我正在解释的一个简短示例:http://jsfiddle.net/Sky9C/1/

当我说“特定结构中的JS对象”时,这就是我所说的:

var filenames = {
    "tires": {
        "big": ["company1.jpg", "company2.jpg"]
    },
    "brakes": {
        "high_quality": ["company3.jpg", "company4.jpg"],
        "low_quality": ["company5.jpg", "company6.jpg"]
    }
};

让这一切成为现实的jQuery就是在小提琴中。如果您需要更多澄清,请告诉我,但这只是我要做的概念。