Question

我想在div中以缩略图的形式显示一些图像。我只想显示足够的图像以适应宽度。当我开始这样做时，我注意到每次运行时我读到的宽度都在不断变化。所以我实现了下面的代码，只在元素加载后尝试读取宽度。我根据其他堆栈溢出问题和一大堆Google搜索编写了这段代码，但是控制台消息没有打印，这意味着它没有进入加载功能。我被困住了，任何帮助都会很棒。请注意，我没有在jquery上做太多工作，这可能是完全错误的。提前感谢您的时间。

<body>
        <div id ="visibleThumbnails", class="visibleThumbs"></div>
            <!-- Below is all the images that will be used. The images below are hidded -->
        <% @cover_file.each do |image_file| %> 
        <%= image_tag("#{image_file}", class: 'imgThumbnail') %>
        <% end %>
</div>
<script type="text/javascript">
    $(document).ready(function() {
            //slides is the list of hidden images from above
        slides = $('#Thumbnails').find('.imgThumbnail');
        var div_width = 0;
            // The code below is what actually fills the div with the appropriate number of images
        while (div_width == 0) {
            $('#visibleThumbnails').one('load',function()
            {
                div_width = $('#visibleThumbnails').width();
                            //I can never get this log to get printed
                console.log("DIV width "+div_Width);
                img_idx = 0;
                var img_width = 0;
                while ((img_width < div_width) && (img_idx < slides.length)) {
                    slides.eq(img_idx).one('load',function(){
                        img_width= img_width + slides.eq(img_idx).width()

                        if (img_width < div_width){
                            $('#visibleThumbnails').append(slides.eq(img_idx).clone().fadeTo('fast',1));
                        }
                        img_idx = img_idx+1;
                    });
                    if (slides.eq(img_idx).complete){
                        slides.eq(img_idx).trigger('load');
                    }
                }
            });
            if ($('#visibleThumbnails').complete){
                $('#visibleThumbnails').trigger('load');
            }   
        }
    })
</script>
</body>

我只想在正确加载值后读取div和img的宽度

0 个答案: