修改 CSS 或 jQuery 以防止屏幕闪烁

Posted

技术标签:

【中文标题】修改 CSS 或 jQuery 以防止屏幕闪烁【英文标题】:CSS or jQuery modification to prevent screen flicker 【发布时间】:2012-10-26 19:48:42 【问题描述】:

我有一个使用 jQuery UI 可排序的图像查看器/放大器。当有很多图像时,窗口变为可滚动以容纳它们。在这种情况下,将图像从一个地方拖到另一个地方时会出现抖动。出现的滚动条也会跳动。

我在除 IE 之外的所有领域都使用过的原始 CSS。然后我生成了一些新的 CSS,它现在可以在所有浏览器中使用,但是我必须保持查看器的区域相对较小,如果有很多图像(即有些完全隐藏并且拖动变得困难),这并不理想。它似乎只发生在观看者的实际区域超出窗口边界时。我对通过 CSS 或 jQuery 的解决方案持开放态度。首先尝试了 CSS b/c,这就是我所知道的。谢谢!

首先,这里是 jQuery:

    $(document).ready(function($)
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) 

    $("#gallery, #viewer").sortable(
        connectWith: ".images",
        items: "div",
        forcePlaceholderSize: true,
        forceHelperSize: true,
        receive: function (event, ui) 
            switch (ui.item.parent().attr("id")) 
                case "viewer":
                    ui.item.animate( height: "250px", width: "250px" );
                    break;
                case "gallery":
                    ui.item.animate( height: "96px", width: "96px" );
                    break;
            
        

    ).disableSelection();



else 
    $("#gallery, #viewer").sortable(
        connectWith: ".images",
        items: "div",
        forcePlaceholderSize: true,
        forceHelperSize: true,
        receive: function (event, ui) 
            switch (ui.item.parent().attr("id")) 
                case "viewer":
                    ui.item.css( height: "525px", width: "auto" );
                    break;
                case "gallery":
                    ui.item.css( height: "150px", width: "auto" );
                    break;
            
        

    ).disableSelection();

);

除了 IE 什么都不会跳转的 CSS:

        html, body min-height:100%;
    .hangingIndent padding-left:22px; text-indent:-22px;
    #gallery width: 95%; min-height: 100px; overflow:auto; *overflow:inherit; margin-bottom: 10px;
    *html #gallery height: 100px; 
    #gallery .image float: left; width: auto; height: 150px; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;
    #gallery .image img  width: auto; height: 148px; border: solid 1px black; cursor: move; 
    #viewer width: 95%; min-height: 250px; background-color:#A3A3A3; padding: 1%; overflow:auto; *overflow:inherit;
    * html #viewer height: 250px;
    #viewer .image float: left; height: 325px; width: auto; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;
    #viewer .image img width: auto; height: 525px; border: solid 3px white; cursor: move; 
    #viewer h4 line-height: 1em; margin: 0 0 0.4em; color:#000;  

所有的 CSS 都可以使用,但放大的图像在可滚动区域内:

        html, body min-height:100%;
    .hangingIndent padding-left:22px; text-indent:-22px;
    #gallery
    
        width: 95%;
        min-height: 100px;
        height: 100px;
        overflow: auto;
        margin-bottom: 10px;
    
    #gallery 
    #gallery .image float: left; width: auto; height: 150px; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;
    #gallery .image img  width: auto; height: 148px; border: solid 1px black; cursor: move; 
    #viewer
    
        width: 95%;
        height: 250px;
        min-height: 250px;
        background-color: #A3A3A3;
        padding: 1%;
        overflow: auto;
    
        #viewer .image
        
            float: left;
            height: 325px;
            width: auto;
            padding: 0;
            margin-right: 10px;
            text-align: center;
            background-color: #e2e2e2;
                border:none;
        
            #viewer .image img
            
                width: auto;
                height: 525px;
                border: solid 3px white;
                cursor: move;
            
    #viewer h4 line-height: 1em; margin: 0 0 0.4em; color:#000;

还有 HTML:

    <div id="gallery" class="images">
<div class="ui-corner-tr image"><img src="../../../../../images/Fig267b.jpg"  title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9a.jpg"  title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9b.jpg"  title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9c.jpg"  title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/xray1.JPG"  title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/xray2.JPG"  title="" /></div>
</div>
<div id="viewer" class="images">
<h4>Drag the images to the area above to remove them from the viewing tool.</h4>
</div>

【问题讨论】:

【参考方案1】:

尝试添加溢出:隐藏;到父元素。我不确定这在这种情况下是否有效,但它通常会消除“闪烁”效果。

【讨论】:

以上是关于修改 CSS 或 jQuery 以防止屏幕闪烁的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 对话框在屏幕上闪烁而不是等待用户输入

jQuery对话框在屏幕上闪烁,而不是留在用户输入

如何在初始页面加载之前加载 CSS 数据主题以防止主题之间闪烁?

如何使用 CSS 或 JS 防止 iOS 键盘将视图推离屏幕

我想用JS HTML CSS JQuery创建一个预加载屏幕(可选),没有后端

横向定位失败,屏幕闪烁