多情況下,我們都需要自己處理image相關的加載邏輯,及其相關的回調函數邏輯,在本文中我將介紹一下javascript中處理相關image標簽,大家嘗嘗會遇到的一些情景,希望對于大家有幫助,當然,如果有大牛能夠提供更好的解決方案和解答,本猿也不盡感謝,OKey,聽我慢慢道來 ~~ ^o^
大家在開發web應用過程中,往往會有些操作,例如,特定web動畫是需要在某些文件體積比較大的背景圖加載完畢之后才可以觸發滴,所以通常情況下,我們這些程序猿都理所當然的把這些觸發動作放到了img標簽加載的相關load事件處理過程中,jQuery相關代碼參考如下:
圖片加載完成后,觸發該圖片的load事件,然后觸發callback回調函數中要執行的相關邏輯或者動畫。
實際場景中,這些比較大的圖片相關的load事件并不是每次都需要被觸發滴,存在偶然性
以下是一個更新版本的代碼書寫:
$('#big-image').on('load', function{ // 在回掉函數中執行的一些邏輯 ...... }).each(function{ this.complete && $(this).trigger('load'); });
相比較前面書寫的相關代碼來說,我們做了一個小小的代碼優化改動,綁定load使用了jQuery中的.one方法而放棄使用.on方法,之所以這么書寫是因為希望load事件在整個代碼邏輯中只被觸發一次,而且避免了被重復執行。
注意: 如果使用的是 jQuery, 觸發load事件時,我們可以使用.load來觸發,如果你使用的第三方 javascript類庫是zepto的話,那么就只能乖乖使用.trigger('load')方法啦~
這里本猿從專業角度和職業角度詳細分析下image的load事件和complete屬性 ^O^
首先看看MDN的一些load事件文字描述:
The load event is fired when a resource and its dependent resources have finished loading.
簡單翻譯過來就是:
load事件是在一個資源并且該資源的依賴資源都完成加載中之后才被觸發
這里大家關注一下關鍵字 finished loading,也就是說用戶代理端(例如,瀏覽器/webView)第一次從服務器上請求資源完成,這算finished loading, 當再次刷新這個頁面,如果瀏覽器使用了上次請求的資源(緩存到本地的資源),那就不算做loading, 自然也就不會觸發資源的load事件。當然本猿對于瀏覽器中本地緩存的應用策略沒有深入了解過,這里就暫且不表,待本猿深入研究后再與各位大牛分享一二, 嘿嘿
MDN對image元素的complete屬性做了如下的描述:
HTMLImageElement.complete Read only
Returns a Boolean that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no src value.
簡單翻譯如下:
HTMLImageElement.complete 只讀屬性
返回一個boolean值,如果是true的話,說明瀏覽器完成了圖片獲取,無論成功與否。即使這個img元素沒有src屬性值的話,該complete屬性值仍舊顯示為true.
這個定義的關鍵點在于finished fetching,換個說法,這個屬性只是用來表明瀏覽器是否履行了他的職責(fetch), 與圖片是否能正常顯示并沒有半毛關系(圖片顯示與否是開發者自己的責任),所以同一個頁面進行第二次刷新的時候,如果瀏覽器還記得他已經fetch過這個圖片了(其中一種表現即是瀏覽器緩存了圖片),那么這個屬性值就是true, 否則就是false.
它跟圖片的load事件沒有直接關系,但是還是有一些間接關系,如果complete值為true話(這種情況一般是非首次加載頁面), 那就表明瀏覽器去抓取過圖片了,那圖片就有可能被緩存,這時load事件就不會觸發,這種情況就需要像如上解決方案中的那樣手動觸發load來輔助實現
版權說明: 本文配圖/文字版權屬于igeekbar.com及作者聯合所有,如需轉載請務必注明iG客吧原文來源,感謝閱讀支持~
意: 這篇文章的處理滑塊驗證碼跟平時的不一樣,并不是簡單的一張背景圖,一張滑塊圖計算滑塊的缺口位置。最近由中國音像與數字出版協會舉辦的2020中國游戲十強投票開始,老大問我能不能搞個自動無限投票,我打開網址操作了一番,感覺簡直不要太簡單,直接說這個自動化爬蟲還不是幾分鐘的事情,完全沒什么技術難點呀,分分鐘給他莫的網站投爆。尷尬的是寫到自動化識別滑塊驗證碼的時候。卻發現該滑塊驗證碼是由canvas繪制而成,而不是以往的兩張圖片進行識別。雖然說有點小阻礙。但是想法總比困難多,在我天馬行空的想法下,幾分鐘也就搞定了這個難點。
目錄
一、分析網站
二、canvas滑塊驗證碼
三、驗證流程
私信小編01即可獲取大量Python學習資料
①、背景canvas
②、滑塊canvas
①、下載滑塊canvas
def download_yzm(self):
js = '''
return document.getElementById('puzzle-lost').toDataURL()
'''
base64str = self.driver.execute_script(js)
resultstr = base64str.strip("data:image/png;base64")
resultstr = resultstr[1:]
imagedata = base64.b64decode(resultstr)
file = open('./bg.png', "wb")
file.write(imagedata)
file.close()
②、識別滑塊canvas中有像素位置
def handler_yzm(self, image):
im = Image.open(image)
im = im.convert('L')
w, h = im.size
result = 0
for x in range(w):
if result != 0:
break
for y in range(h):
if im.getpixel((x, y)) > 0:
result = x
break
return result - 10
③、最后
者:linong
轉發鏈接:https://segmentfault.com/a/1190000022597533
*請認真填寫需求信息,我們會在24小時內與您取得聯系。