Question

我正在开设新网站。

我在DIV块中构建了一个图像。 setBlock(row, 10, '#edc945', 'hair');

问题是，网站很重，我认为是因为setBlock（）函数，但我不确定。

有什么想法吗？

完整演示：http://bobvanluijt.com/newAva/ava.html
（它仍然在开发中; - ）

setBlock函数：

i=0;
    function setBlock(top, left, color, additionalClass, secondAdditionalClass){
            if(!$('.blockContainer').length){
                $('.container').append('<div class="blockContainer"></div>');
            }
            $('.blockContainer').append('<div class="littleBlock" id="littleBlock__'+i+'" data-row="'+top+'" data-column="'+left+'"></div>');
            $("#littleBlock__"+i).css('background-color', color);
            $("#littleBlock__"+i).css('z-index', i);
            $("#littleBlock__"+i).css('left', Math.round(left*blockSize)+'px');
            $("#littleBlock__"+i).css('top', Math.round(top*blockSize)+'px');
            if(additionalClass!=''){
                $("#littleBlock__"+i).addClass(additionalClass);
            }
            if(secondAdditionalClass!=''){
                $("#littleBlock__"+i).addClass(secondAdditionalClass);
            }
            $('.littleBlock').css('width', blockSize+'px');
            $('.littleBlock').css('height', blockSize+'px');
            i=i+1;
        }

Answer 1

这是一个略微优化的代码，但可能还有更多可以做的事情：

i=0;
function setBlock(top, left, color, additionalClass, secondAdditionalClass){
    if(!$('.blockContainer').length){
        $('.container').append('<div class="blockContainer"></div>');
    }
    $('.blockContainer').append('<div class="littleBlock" id="littleBlock__'+i+'" data-row="'+top+'" data-column="'+left+'"></div>');
    var littleBlock = $("#littleBlock__"+i);
    littleBlock.css('background-color', color).css('z-index', i).css('left', Math.round(left*blockSize)+'px').css('top', Math.round(top*blockSize)+'px');
    if(additionalClass!=''){
        littleBlock.addClass(additionalClass);
    }
    if(secondAdditionalClass!=''){
        littleBlock.addClass(secondAdditionalClass);
    }
    littleBlock.css('width', blockSize+'px').css('height', blockSize+'px');
    i++;
}

通过将$("#littleBlock__"+i)的引用存储在变量中，JS不需要再次搜索它。你也可以将jQuery函数串起来，就像我对你做的多个css更新一样。

希望有所帮助。

Answer 2

所以我认为你的问题是你的js libs都被加载到头部

表示浏览器在解析正文之前会加载所有脚本和整个脚本，导致页面空白，直到解析正文并执行窗口onload。

您可以做的是将所有脚本放在</body>标记

之前然后你会立刻＆＃34;立即＃34;看＆＃34;某事＆＃34;我想

改变感觉＆＃34;没有任何反应＆＃34;发生了一些事情＆＃34;你可以有一些微调器gif，你将在加载函数的文档中删除

为什么这个基于jQuery的网站如此繁重？

2 个答案: