整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頭條首發必備指南#為了避免首發內容被他人抄襲，您可以采取以下措施：
1. 使用版權聲明
在您的內容中添加版權聲明，包括版權符號（?）、出版年份和版權持有人的名字。這樣可以明確表示您對內容的所有權，并在法律上提供一定程度的保護。
2. 添加水印
對于圖像和視頻內容，添加水印是一種常見的保護方法。水印通常包含文本或標識，被添加到內容中，使得內容竊賊難以或不可能在不改變或降低原始內容質量的情況下將其去除。
3. 申請DMCA保護
通過美國的《數字千年版權法案》（DMCA），您可以申請保護您的網站免受內容盜竊。一旦您的網站被標記為重復內容或剽竊，DMCA可以幫助您要求任何未經許可復制您的內容的人從其網站上刪除這些內容。
4. 制定使用條款
在您的網站上制定使用條款，明確規定訪問者如何使用您的內容以及任何未經授權的使用的后果。這是一份法律協議，可以用來保護您的內容，防止未經授權的使用。
5. 使用密碼保護
對于某些內容，您可以設置密碼保護，限制對這些內容的訪問。這樣，只有經過授權的用戶才能查看或下載這些內容，從而防止未授權的訪問和復制。
6. 使用"無索引"元標簽
通過在HTML代碼中添加"無索引"元標簽，您可以告訴搜索引擎不要索引某個特定網頁。這樣，您的內容將不會顯示在搜索引擎的結果頁上，減少了被他人找到和復制的機會。
7. 保留創作記錄
保留作品的創作記錄，包括草稿、修改稿、最終稿等。這些記錄可以證明作品的創作過程和原創性，防止他人抄襲。
8. 使用原創性檢測軟件
使用原創性檢測軟件可以幫助檢測作品是否與現有文獻相同或相似，從而避免抄襲和剽竊。
9. 及時維權
如果發現作品被抄襲或剽竊，應及時采取措施維權。可以通過法律途徑或向相關機構投訴，要求侵權者停止侵權行為并賠償損失。
通過上述措施，您可以在一定程度上保護您的首發內容不被他人抄襲。同時，也要注意不斷提升自己的創作水平，形成獨特的風格和觀點，這樣即使有人試圖模仿，也難以達到同樣的原創性和深度。#頭條怎樣不侵權# #版權問題大討論# #標題是形式#
信不少開發人員都會遇見這個問題，基本上每個網站都會有版權聲明，其中會用到版權符號copyright:?，但是我們在開發的過程中，是不能直接以漢字輸入?的，需要用到html代碼來實現輸出，否則顯示是不正常的，那么我們應該怎么利用html代碼來正常的輸出版權符號“?”的呢？
如果我沒有記錯的話，html版權符號是?
下面再給大家推薦其他的html特殊字符編碼
使用一個“&”后面帶上特殊符指令，就可以了
接下來再看一下下面的這些特殊符號的轉義寫法
?
最后還有這些：
大家可以收藏下上面這些html符號編碼，很有可能會用的到啊!
通常情況下，HTML 中的圖片資源會自上而下依次加載，而部分圖片只有在用戶向下滾動頁面的場景下才能被看見，否則這部分圖片的流量就白白浪費了。
所以，對于那些含有大量圖片資源的網站，會采用“按需加載”的方式，也就是當圖片資源出現在視口區域內，才會被加載，這樣可能會影響一丟丟用戶體驗，但是能大大節省網站的流量。
而上述“按需加載”的方式就是今天的主角 -- 圖片懶加載技術
圖片懶加載技術主要通過監聽圖片資源容器是否出現在視口區域內，來決定圖片資源是否被加載。
那么實現圖片懶加載技術的核心就是如何判斷元素處于視口區域之內。
早前實現的思路：
1、scroll 事件
scroll 事件可能會被高頻度的觸發，而按照上述思路，必然會在 scroll 事件處理程序中出現大量的 DOM 操作，這很可能會使頁面不再“如絲般順滑”，這時就需要降低 DOM 操作的頻率。
降低 DOM 操作的頻率可以采用函數節流的方式，函數節流能夠確保在固定時間間隔只執行一次操作。
與函數節流相關的另一個概念叫做函數防抖，這位兄弟同樣等待一個時間間隔執行操作，但是它被打斷之后就需要重新開始計時。
這也是此場景下采用函數節流的原因。在 JavaScript 中可以采用 setTimeout + 閉包的方式實現函數節流：
function throttle (fn, interval=500) {
let timer=null
let firstTime=true
return function (...args) {
if (firstTime) {
// 第一次加載
fn.apply(this, args)
return firstTime=false
}
if (timer) {
// 定時器正在執行中，跳過
return
}
timer=setTimeout(()=> {
clearTimeout(timer)
timer=null
fn.apply(this, args)
}, interval)
}
}
除了上述 setTimeout + 閉包的實現方式，還可以通過 window.requestAnimationFrame() 方法實現，這里不再贅述，有興趣的同學可以自己嘗試嘗試。
2、getBoundingClientRect()方法
JavaScript 提供 Element.getBoundingClientRect() 方法返回元素的大小以及相對于視口的位置信息，接下來會用到返回對象的四個屬性：
再結合視口的高度和寬度，即可判斷元素是否出現在視口區域內：
function isElementInViewport (el) {
const { top, height, left, width }=el.getBoundingClientRect()
const w=window.innerWidth || document.documentElement.clientWidth
const h=window.innerHeight || document.documentElement.clientHeight
return (
top <=h &&
(top + height) >=0 &&
left <=w &&
(left + width) >=0
)
}
3、實現
接下來在實現圖片懶加載的過程中，還需要注意一些小問題：
function LazyLoad (el, options) {
if (!(this instanceof LazyLoad)) {
return new LazyLoad(el)
}
this.setting=Object.assign({}, { src: 'data-src', srcset: 'data-srcset', selector: '.lazyload' }, options)
if (typeof el==='string') {
el=document.querySelectorAll(el)
}
this.images=Array.from(el)
this.listener=this.loadImage()
this.listener()
this.initEvent()
}
LazyLoad.prototype={
loadImage () {
return throttle(function () {
let startIndex=0
while (startIndex < this.images.length) {
const image=this.images[startIndex]
if (isElementInViewport(image)) {
const src=image.getAttribute(this.setting.src)
const srcset=image.getAttribute(this.setting.srcset)
if (image.tagName.toLowerCase()==='img') {
if (src) {
image.src=src
}
if (srcset) {
image.srcset=srcset
}
} else {
image.style.backgroundImage=`url(${src})`
}
this.images.splice(startIndex, 1)
continue
}
startIndex++
}
if (!this.images.length) {
this.destroy()
}
}).bind(this)
},
initEvent () {
window.addEventListener('scroll', this.listener, false)
},
destroy () {
window.removeEventListener('scroll', this.listener, false)
this.images=null
this.listener=null
}
}
如今，Web為開發者提供了 IntersectionObserver 接口，它可以異步監聽目標元素與其祖先或視窗的交叉狀態，注意這個接口是異步的，它不隨著目標元素的滾動同步觸發，所以它并不會影響頁面的滾動性能。
IntersectionObserver 構造函數接收兩個參數，回調函數以及配置項。
1、配置項
配置項中的參數有以下三個：
2、回調函數
IntersectionObserver 實例執行回調函數時，會傳遞一個包含 IntersectionObserverEntry 對象的數組，該對象一共有七大屬性：
3、實現
在此之前，還需要了解 IntersectionObserver 實例方法：
以下為實現代碼：
function LazyLoad (images, options={}) {
if (!(this instanceof LazyLoad)) {
return new LazyLoad(images, options)
}
this.setting=Object.assign({}, { src: 'data-src', srcset: 'data-srcset', selector: '.lazyload' }, options)
this.images=images || document.querySelectorAll(this.setting.selector)
this.observer=null
this.init()
}
LazyLoad.prototype.init=function () {
let self=this
let observerConfig={
root: null,
rootMargin: '0px',
threshold: [0]
}
this.observer=new IntersectionObserver(entries=> {
entries.forEach(entry=> {
const target=entry.target
if (entry.intersectionRatio > 0) {
this.observer.unobserve(target)
const src=target.getAttribute(this.setting.src)
const srcset=target.getAttribute(this.setting.srcset)
if ('img'===target.tagName.toLowerCase()) {
if (src) {
target.src=src
}
if (srcset) {
target.srcset=srcset
}
} else {
target.style.backgroundImage=`url(${src})`
}
}
})
}, observerConfig)
this.images.forEach(image=> this.observer.observe(image))
}
到此，實現圖片懶加載主要有兩種方法：
第二種方法更加省心，到目前為止兼容性也還行：
相比較下，第一種方法需要從各個方面去優化 scroll 事件，從而達到頁面滾動“如絲般順滑”的效果。最后，放上兩篇關于滾動優化的文章。
作者：descire
鏈接：https://juejin.im/post/5c9376506fb9a070fc623b2c
著作權歸作者所有。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
