Javascript jQuery插件和图像有问题_Javascript_Jquery_Image

Javascript jQuery插件和图像有问题

javascript jquery image

Javascript jQuery插件和图像有问题,javascript,jquery,image,Javascript,Jquery,Image,我正在开发jquery插件，在网格中创建列，而我在图像方面遇到了困难。我不确定是某种css需要更改，还是javascript运行得太快。以下是html： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>

我正在开发jquery插件，在网格中创建列，而我在图像方面遇到了困难。我不确定是某种css需要更改，还是javascript运行得太快。以下是html：

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">        </script>
    <script src="gridilizer.js"></script>
    <script>
            $(document).ready(function() {
                    $(this).gridilizer();
            });
    </script>
    <style>
    body, html {
        padding:0;
        margin:0;
    }
    header {
        background:#dcd;
        height:200px;
        font-size:100px;
        text-align:center;
        line-height:200px;
    }
    [data-rows] {
        background:#dcdcdc;
    }
    </style>
    </head>
    <body>
    <header>
            GRIDILIZER.JS
    </header>

    <div class="row">
        <div data-rows="7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="5">
            test8
        </div>
    </div>

    <div class="row">
        <div data-rows="12">
            <img width="50%" src="http://images.wikia.com/powerlisting/images/b/b9/Mountain_wallpaper_005_1024.jpg" />
            <p>Image</p>
        </div>
    </div>

    <div class="row">
        <div data-rows="3">
            <h1>Headline</h1>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="3">
            test4
        </div>
        <div data-rows="3">
            test4
        </div>
    </div>
    </body>
    </html>

这可能是因为您在DOM完全加载之前调用了插件。浏览器解析html代码的方式是自上而下的。因此，它首先点击函数调用，然后呈现DOM。根据执行插件功能所需的时间，在加载整个页面时，DOM可能无法完全加载。请尝试，将调用移动到底部，就在end body标记（）之前。您仍然可以将声明保留在中。让我知道进展如何

在

this.css({
        'width':width+'%',
        'height':100%
        'display':'block',
        'float':'left',
        'padding':'2% 5%',
        'border':'10px solid '+background,
        '-webkit-box-sizing':'border-box',
        '-moz-box-sizing':'border-box',
        'box-sizing':'border-box'
        });**

尝试添加“高度”：100%以使其适合父分区的范围。

问题是什么？你预计会发生什么和正在发生什么？这就是图像发生的情况。我的图像没有匹配大小，而是溢出。查看一下网络上发生的事情，就会发现javascript是先加载的。不确定这是否是问题所在。您的图像问题不清楚。如果您认为脚本运行太快，请尝试将javascript放在页面底部。我已经尝试过了。它不能解决问题，移动也不能解决问题。我将对插件的调用包装在$（document）.ready（）中，但这似乎也没有帮助。

this.css({
        'width':width+'%',
        'height':100%
        'display':'block',
        'float':'left',
        'padding':'2% 5%',
        'border':'10px solid '+background,
        '-webkit-box-sizing':'border-box',
        '-moz-box-sizing':'border-box',
        'box-sizing':'border-box'
        });**