發表文章

純js 偵測網頁圖片是否載入完畢

-
var timer = setInterval(function(){ var isAllImageComplete = true; //取得img标签(略过class是no-wait的图片) document.querySelectorAll('img:not(.no-wait)').forEach(element => { //如果有一张图片的complete是false的话就把 isAllImageComplete 的状态改成false if(!element.complete){ isAllImageComplete = false; } }); //如果 isAllImageComplete的状态是false代表图片还没载入完成 if (isAllImageComplete){ //如果成功会进入 //清掉setInterval clearInterval(timer); //把loading画面的display设成none(这边要自己做) document.querySelector('.loading-hover').style.cssText="display:none;"; } }, 100); //每0.1秒就检查一次
張貼留言
閱讀完整內容

图片懒加载(lazyloading)

-
需用到jquery和lodash两个套件 步骤一 帮图片加入  lazyloadimg 这个class 步骤二 图片的html要这样写 <img src="放loading的样式图片或是不放都行" data-src="图片的路径" alt="" class="lazyloadimg"> 步骤三 window . onscroll = _ . throttle ( watchscroll , 200 ); function watchscroll (){ console . log ( '123' ); var bodyScrollHeight = $ ( document ). scrollTop (); // body滚动高度 var windowHeight = window . innerHeight ; // 视窗高度 var imgs = document . getElementsByClassName ( 'lazyloadimg' ); console . log ( bodyScrollHeight ); for ( var i = 0 ; i < imgs . length ; i ++) { var imgHeight = $ ( imgs [ i ])[ 0 ]. offsetTop // 图片距离顶部高度 console . log ( imgHeight ); if ( imgHeight < windowHeight + bodyScrollHeight ) { imgs [ i ]. src = imgs [ i ]. getAttribute ( 'data-src' ); imgs [ i ]. className = imgs [ i ]. className . replace ( 'lazyloadimg...
張貼留言
閱讀完整內容

PHP获取本周第一天和最后一天

-
$date=new DateTime(); //带要算的日期 $date->modify('this week'); $first_day_of_week=$date->format('Y-m-d'); $date->modify('this week +6 days'); $end_day_of_week=$date->format('Y-m-d');
張貼留言
閱讀完整內容

Vue.js v-for裡面再包一個v-for

-
html的部分 < div class = "list-block" id = "official_choise" > < div class = "content-block-title" > 官方分类 </ div > <!-- <ul> <li> <div class="dom-C empty_content">已无官方分类可供选择</div> </li> </ul> --> < ul > < li class = "accordion-item" v-for="todo in mydata" > < a href = "#" class = "item-content item-link" > < div class = "item-inner" > < div class = "item-title" > {{ todo.sort_name }} </ div > </ div > </ a > < div class = "accordion-item-content" > < div class = "con...
張貼留言
閱讀完整內容

js 跨網域使用api 解決方法

-
===========這個是js的部分=========== $.ajax({             url: "http://123456.com/"  //api網址             dataType:"jsonp",             jsonpCallback: " OnceTemple ", //這個值要跟api那邊連動的，這個要改的話要連api一起改         }).done(function(temple){             //取到資料之後要處理的事情         }); ===========api傳回來的資料============ echo " OnceTemple (".json_encode($once).");"; 就是你的資料要用一個字串和括號包起來再傳回來 如果不用個的話瀏覽器會報錯
張貼留言
閱讀完整內容

formData ajax送資料

-
前陣子因為有個需求 送出表單的時候不想要畫面重刷，資料及時回填到頁面來。 這樣的話就是要用到ajax的技術， 單純的文字資料沒什麼問題， 但是如果要用圖片或影片的話，就必須麻煩一些了。 資料找了好久找到了一篇使用formData 和 XMLHTTPRequest 資料來源 : https://gist.github.com/ebidel/2410898 這個網站裡面有兩段code handle_file_upload.php <?php $fileName = $_FILES['afile']['name']; $fileType = $_FILES['afile']['type']; $fileContent = file_get_contents($_FILES['afile']['tmp_name']); $dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent); $json = json_encode(array( 'name' => $fileName, 'type' => $fileType, 'dataUrl' => $dataUrl, 'username' => $_REQUEST['username'], 'accountnum' => $_REQUEST['accountnum'] )); echo $json; ?> 第一行第二行都是在宣告一個變數來接post過來的資料 第三行是把圖片做成實體檔案到指定路徑 第四行是把圖片轉成base64 第五行開始到倒數第二行都是在建立一個json陣列的資料 最後一行是把json的資料show出來 <!DOCTYPE html> <!-- Copyright 2012 Google Inc. Licensed under the Apac...
張貼留言
閱讀完整內容

CI 使用ckeditor，ckfinder的替代品

-
圖片
ckeditor 免費使用的沒錯 但是如果要上傳圖片的話就需要另外掛載ckfinder來使用 然而ckfinder需要付費才能使用全部的功能 例如把上傳的圖片刪除就需要付費才有辦法使用 而且要根據使用者來自定義資料夾的話ckfinder實現起來頗複雜(在網路上找了很久都看不懂) 後來找到了這一款 "Filemanager" https://github.com/simogeo/Filemanager 這一款不輸ckfinder，重點是免費使用 把這兩個ckeditor 和 Filemanager 下載下來後放到想放的assets裡 再來就參考這一篇 https://github.com/moemoe89/codeigniter-ckeditor-filemanager STEP1 去找 CI的 index.php 檔案 把 $application_folder = 'application'; 改成 $application_folder = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'application'; 把 $system_path = 'system'; 改成 $system_path = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'system'; STEP2 找到filemanager資料夾裡面的scripts裡的  filemanager.config.js.default  這個檔案 複製一份把檔名的.default去掉 STEP3 再來到filemanager -> connnectors -> php 找到這個檔案   default.config.php 在裡面任意處加上 ob_start(); include('../../../../index.php'); ob_end_clean(); $CI =& get_instance(); $CI->load->driver('session'); ...
張貼留言
閱讀完整內容