在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ JS圖片預覽問題，導致后續(xù)函數(shù)不執(zhí)行問題？

JS圖片預覽問題，導致后續(xù)函數(shù)不執(zhí)行問題？

以下是代碼片段
使用的JS本地預覽圖片，上傳后加載到預先寫好的DIV中，然后圖片加載完成后后續(xù)函數(shù)彈出的提示 很快背覆蓋
甚至其他功能彈出的提示也并不能使用，困惑很久，求解答。

function PreviewImage(divImage, upload) {
    if (checkPic()) {
        try {
            //console.log(upload.files[0]);
            var imgPath = getObjectURL(upload.files[0]);
            // $(".divImage").css("background","url(imgPath)")
            document.getElementById(divImage).innerHTML = "<img id='imgPreview' class='bgimg1' src='" + imgPath + "' width='" + '100%' + "' height='" + '100%' + "'/>";
            $(".menu").hide();
            $(".menuswitch1").removeClass('menuswitch1').addClass('menuswitch');
            var appElement = document.querySelector('[ng-controller=screenCtrl]');
            var $scope = angular.element(appElement).scope();
            $(".success_text").html("更改背景圖片成功");
            $scope.$apply(function () {
                $scope.success_display = false;
            })
            setTimeout(function () {
                $scope.$apply(function () {
                    $scope.success_display = true;
                })
            }, 2000);
        } catch (e) {
            alert("無法預覽圖片");
        }
    }
}
回答
編輯回答
執(zhí)念

把jQ的部分改了改，字符串的地方看的腦仁疼。。。Angular的部分沒動。

function PreviewImage(divImage, upload) {
    if (checkPic()) {
        var imgPath = getObjectURL(upload.files[0]);
        $('<img>', {
            "class": 'bgimg1',
            id: 'imgPreview',
            css: {
                width: '100%',
                height: '100%'
            }
        }).appendTo('#divImage');
        $('.menu').hide();
        $('.menuswitch1')
            .toggleClass('menuswitch1')
            .toggleClass('menuswitch');
        var appElement = $('[ng-controller="screenCtrl"]')[0];
        var $scope = angular.element(appElement).scope();
        $('.success_text').html('更改背景圖片成功');
        $scope.$apply(function () {
            $scope.success_display = false;
        })
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.success_display = true;
            })
        }, 2000);
    }
}

另外，

  1. 下次盡量別try這么大塊的代碼吧。。。還不如多console點或者等報錯
  2. 引號建議以單引號為主
2018年1月8日 19:01
編輯回答
祈歡

根據(jù)熊貓桑前輩的答案，我去菜查了一下，發(fā)現(xiàn)一篇博文寫的很好。http://blog.163.com/xiaopengy...

大意是說jquery的加dom方法比js的更優(yōu)

以下是原文。

看一篇介紹jQuery的資料，覺得說得很好，就摘抄下來了。因為我經(jīng)常犯這種錯誤。

1.錯誤的編程方法

　　我們經(jīng)常使用javascript動態(tài)的創(chuàng)建元素, 有很多程序員通過直接更改某一個容器的HTML內(nèi)容.比如:

<!DOCTYPE　html　PUBLIC　"-//W3C//DTD　XHTML　1.0　Transitional//EN"　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html　xmlns="http://www.w3.org/1999/xhtml">
<head>
　　<title>動態(tài)創(chuàng)建對象</title>
</head>
<body>
<div　id="testDiv">測試圖層</div>
<script　type="text/javascript">
　　document.getElementById("testDiv").innerHTML　=　"<div　style="border:solid　1px　#FF0000">動態(tài)創(chuàng)建的div</div>";
</script>
</body>
</html>

　　上面的示例中我通過修改testDiv的內(nèi)容,在頁面上動態(tài)的添加了一個div元素. 但是請牢記,這是錯誤的做法!

錯誤的原因:

　　(1) 在頁面加載時改變了頁面的結(jié)構. 在IE6中如果網(wǎng)絡變慢或者頁面內(nèi)容太大就會出現(xiàn)"終止操作"的錯誤. 也就是說"永遠不要在頁面加載時改變頁面的Dom模型".

　　(2) 使用修改HTML內(nèi)容添加元素,　 不符合Dom標準. 在實際工作中也碰到過使用這種方法修改內(nèi)容后, 某些瀏覽器中并不能立刻顯示添加的元素, 因為不同瀏覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement創(chuàng)建對象, 在所有的瀏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個完整的HTML字符串, 內(nèi)部也是使用innerHTML. 所以也不是完全否定innerHTML函數(shù)的使用.

　　所以從現(xiàn)在開始請摒棄這種舊知識, 使用下面介紹的正確方法編程.

　　2.創(chuàng)建新的元素

　　下面介紹兩種正確的創(chuàng)建元素的方式.

　　(1)使用HTML DOM創(chuàng)建元素

　　什么是 DOM？

　　通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。

　　要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。

　　在 1998 年，W3C 發(fā)布了第一級的 DOM 規(guī)范。這個規(guī)范允許訪問和操作 HTML 頁面中的每一個單獨的元素。

　　所有的瀏覽器都執(zhí)行了這個標準，因此，DOM 的兼容性問題也幾乎難覓蹤影了。

　　DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。

　　DOM 被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：

Core DOM
定義了一套標準的針對任何結(jié)構化文檔的對象
XML DOM
定義了一套標準的針對 XML 文檔的對象
HTML DOM
定義了一套標準的針對 HTML 文檔的對象。
　　關于使用HTML DOM創(chuàng)建元素本文不做詳細介紹, 下面舉一個簡單的例子:

　　//使用Dom標準創(chuàng)建元素
　　var　select　=　document.createElement("select");
　　select.options[0]　=　new　Option("加載項1",　"value1");
　　select.options[1]　=　new　Option("加載項2",　"value2");
　　select.size　=　"2";
　　var　object　=　testDiv.appendChild(select);

　　通過使用 document.createElement 方法我們可以創(chuàng)建Dom元素, 然后通過appendChild方法為添加到指定對象上.

　　(2) 使用jQuery函數(shù)創(chuàng)建元素

　　在jQuery中創(chuàng)建對象更加簡單, 比如創(chuàng)建一個Div元素:

$("<div　style="border:solid　1px　#FF0000">動態(tài)創(chuàng)建的div</div>")
.csharpcode,　.csharpcode　pre
{

font-size:　small;

color:　black;

font-family:　consolas,　"Courier　New",　courier,　monospace;

background-color:　#ffffff;

/white-space:　pre;/
}
.csharpcode　pre　{　margin:　0em;　}
.csharpcode　.rem　{　color:　#008000;　}
.csharpcode　.kwrd　{　color:　#0000ff;　}
.csharpcode　.str　{　color:　#006080;　}
.csharpcode　.op　{　color:　#0000c0;　}
.csharpcode　.preproc　{　color:　#cc6633;　}
.csharpcode　.asp　{　background-color:　#ffff00;　}
.csharpcode　.html　{　color:　#800000;　}
.csharpcode　.attr　{　color:　#ff0000;　}
.csharpcode　.alt　
{

background-color:　#f4f4f4;

width:　100%;

margin:　0em;
}
.csharpcode　.lnum　{　color:　#606060;　}

　　我們主要使用jQuery核心類庫中的一個方法:

　　jQuery( html, ownerDocument )

　　Returns: jQuery

　　根據(jù)HTML原始字符串動態(tài)創(chuàng)建Dom元素.

　　其中html參數(shù)是一個HTML字符串,　 在jQuery1.3.2中對此函數(shù)做了改進:

　　當HTML字符串是沒有屬性的元素是, 內(nèi)部使用document.createElement創(chuàng)建元素, 比如:

//jQuery內(nèi)部使用document.createElement創(chuàng)建元素:
$("<div/>").css("border","solid　1px　#FF0000").html("動態(tài)創(chuàng)建的div").appendTo(testDiv);

　　否則使用innerHTML方法創(chuàng)建元素:

//jQuery內(nèi)部使用innerHTML創(chuàng)建元素:
$("<div　style="border:solid　1px　#FF0000">動態(tài)創(chuàng)建的div</div>").appendTo(testDiv);

　　3.將元素添加到對象上

　　我們可以使用上面兩種方式創(chuàng)建一個而元素, 但是上面已經(jīng)提到一定不要在頁面加載時就改變頁面的DOM結(jié)構, 比如添加一個元素. 正確的做法是在頁面加載完畢后添加或刪除元素.

　　傳統(tǒng)上, 使用window.onload完成上述目的:

//DOM加載完畢后添加元素
//傳統(tǒng)方法
window.onload　=　function()　{　testDiv.innerHTML　=　"<div　style="border:solid　1px　#FF0000">動態(tài)創(chuàng)建的div</div>";　}

　　雖然能夠在DOM完整加載后, 在添加新的元素, 但是不幸的是瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后. 所以如果某個圖片或者其他資源加載很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片加載之前就執(zhí)行了需要依賴動態(tài)添加的元素的腳本而導致腳本錯誤.

　　解決辦法就是等DOM被解析后, 在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實現(xiàn)變得可行:

//jQuery　使用動態(tài)創(chuàng)建的$(document).ready(function)方法
$(document).ready(
　　　　function()　{　testDiv.innerHTML　=　"<div　style="border:solid　1px　#FF0000">使用動態(tài)創(chuàng)建的$(document).ready(function)方法</div>";　}
);

　　或者使用簡便語法:

//jQuery　使用$(function)方法
$(
　　　　function()　{　testDiv.innerHTML　+=　"<div　style="border:solid　1px　#FF0000">使用$(function)方法</div>";　}
);

　　使用$()將我們的函數(shù)包裝起來即可. 而且可以在一個頁面綁定多個函數(shù), 如果使用傳統(tǒng)的window.onload則只能調(diào)用一個函數(shù).

　　所以請大家將修改DOM的函數(shù)使用此方法調(diào)用. 另外還要注意document.createElement和innerHTML的區(qū)別. 如果可以請盡量使用document.createElement和$("<div/>")的形式創(chuàng)建對象.

2017年4月10日 16:15